這次帶給大家網頁的佈局方式之清除浮動， 清除浮動的注意事項有哪些，以下就是實戰案例，一起來看一下。
盒子的高度問題
1.標準流中盒子的高度可以被內容高度撐起來;
2.浮動流中浮動的內容不能撐起盒子的高度;
為什麼要清楚浮動?
相鄰的盒子之間,如果前面的盒子沒有高度,那麼後面盒子中的浮動元素就會去找前面盒子中的浮動元素,這樣會導致介面混亂,所以需要清除浮動;
清除浮動方式一:
解決方案:
給前面一個父元素設定高度
注意點:
在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少;
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 20px; //给前面盒子设置高度
background-color: red;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
} </style>登入後複製
body:
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><div class="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: 1px solid #000;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
clear: both; //给后面的盒子添加clear:both;属性
margin-top: 28px;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
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属性,
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.wall{
clear: both; //设置clear: both;属性;
}
.h20{
height: 20px; //设置额外标签的高度来实现margin效果;
background-color: skyblue;
}
</style>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>登入後複製
清除浮動方式四:
解決方案:
內牆法:
1在第一個盒子中所有子元素最後添加一個額外的區塊級元素,
2給這個額外新增的區塊級元素設定clear: both;屬性
注意點:
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法它可以讓第一個盒子使用margin-bottom屬性
<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>
登入後複製
外牆法和內牆法區別?
外牆法不能撐起第一個盒子的高度,而內牆法可以撐起第一個盒子的高度
在企業開發中不常用隔牆法來清除浮動(隔間牆法:外牆法和內牆法)
CSS:
<style>
*{ margin: 0; padding: 0;
} .box1{ background-color: red; /*margin-bottom: 10px;*/
} .box2{ background-color: green; /*margin-top: 10px;*/
} .box1 p{ width: 100px; background-color: blue;
} .box2 p{ width: 100px; background-color: yellow;
} p{ float: left;
} .wall{ clear: both;
} .h20{ height: 20px; background-color: skyblue;
} </style></head>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<div class="wall h20"></div> //设置内墙</div><div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
CSS的背景與精靈圖
CSS的顯示模式如何使用
以上是網頁的版面方式之清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
