溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹html網頁的布局方式之如何清除浮動，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
盒子的高度問題
1.標準流中盒子的高度可以被內容高度撐起來;
2.浮動流中浮動的內容不能撐起盒子的高度;
為什么要清楚浮動?
相鄰的盒子之間,如果前面的盒子沒有高度,那么后面盒子中的浮動元素就會去找前面盒子中的浮動元素,這樣會導致界面混亂,所以需要清除浮動;
清除浮動方式一:
解決方案:
給前面一個父元素設置高度
注意點:
在企業開發中,我們能不寫高度就不寫高度,所以這種方式用得很少;
CSS:
<style>
*{
margin:0;
padding:0;
}
.box1{
height:20px;//給前面盒子設置高度
background-color:red;
}
.box2{
background-color:green;
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}</style>
body:
<divclass="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><divclass="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
清除浮動方式二:
解決方案:
給后面的盒子添加clear:both;屬性
clear屬性取值:
none:默認取值,按照浮動元素的排序規則來排序(左浮動找左浮動,右浮動找右浮動)
left:不要找前面的左浮動元素(也就是:不要和前面的左浮動元素顯示在一行)
right:不要找前面的右浮動元素
both:不要找前面的左浮動元素和右浮動元素
注意點:
當我們給某個元素添加clear屬性之后,那么這個屬性的margin屬性就會失效;所以不推薦使用
CSS:
<style>
*{
margin:0;
padding:0;
}
body{
border:1pxsolid#000;
}
.box1{
background-color:red;
}
.box2{
background-color:green;
clear:both;//給后面的盒子添加clear:both;屬性
margin-top:28px;
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}</style>
清除浮動方式三:
解決方案:
外墻法:在兩個有浮動子元素的盒子之間添加一個額外的塊級元素;并且設置clear:both;屬性;
注意點:
外墻法它可以讓第二個盒子使用margin-top屬性,
外墻法不可以讓第一個盒子使用margin-bottom屬性,
不過可以通過設置額外標簽的高度來實現margin效果;
搜狐中大量使用了這個技術,但是由于需要添加大量無意義的標簽,所以不推薦使用;
CSS:
<style>
*{
margin:0;
padding:0;
}
.box1{
background-color:red;/*margin-bottom:10px;*///外墻法不可以讓第一個盒子使用margin-bottom屬性,
}
.box2{
background-color:green;/*margin-top:10px;*///外墻法它可以讓第二個盒子使用margin-top屬性,
}
.box1p{
width:100px;
background-color:blue;
}
.box2p{
width:100px;
background-color:yellow;
}
p{
float:left;
}
.wall{
clear:both;//設置clear:both;屬性;
}
.h30{
height:20px;//設置額外標簽的高度來實現margin效果;
background-color:skyblue;
}
</style>
<divclass="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><divclass="wallh30"></div>//外墻法:在兩個有浮動子元素的盒子之間添加一個額外的塊級元素;<divclass="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>
清除浮動方式四:
解決方案:
內墻法:
1在第一個盒子中所有子元素最后添加一個額外的塊級元素,
2給這個額外添加的塊級元素設置clear:both;屬性
注意點:
內墻法它可以讓第二個盒子使用margin-top屬性
內墻法它可以讓第一個盒子使用margin-bottom屬性
<a>內墻法會自動撐起盒子的高度,所以可以直接設置margin屬性</a>
外墻法和內墻法區別?
外墻法不能撐起第一個盒子的高度,而內墻法可以撐起第一個盒子的高度
在企業開發中<a>不常用隔墻法</a>來清除浮動(隔墻法:外墻法和內墻法)
CSS:
<style>
*{margin:0;padding:0;
}.box1{background-color:red;/*margin-bottom:10px;*/
}.box2{background-color:green;/*margin-top:10px;*/
}.box1p{width:100px;background-color:blue;
}.box2p{width:100px;background-color:yellow;
}p{float:left;
}.wall{clear:both;
}.h30{height:20px;background-color:skyblue;
}</style></head>
<divclass="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<divclass="wallh30"></div>//設置內墻</div><divclass="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>
以上是“html網頁的布局方式之如何清除浮動”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
