浮動會使當(dāng)前標簽產(chǎn)生向上浮的效果醋粟，同時會影響到前后標簽每币、父級標簽的位置及 width height 屬性，在網(wǎng)頁設(shè)計中清除浮動是一種很常見的操作可款，以下整理了幾種清除浮動的方法
- 給父元素設(shè)定高度
- 給下一個添加clear屬性
- 增加一道墻(空標簽)
- 使用after偽元素
- 使用overflow:hidden屬性
具體方法
HTML 默認統(tǒng)一代碼：
<div id="div1">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div id="div2"></div>
1.給父元素設(shè)定高度
#div1{
width: 400px;
height: 120px;
border: 1px solid black;
}
#div1 .child{
width: 100px;
height: 120px;
background-color: orange;
margin-right: 20px;
float: left;
}
#div2{
width:400px;
height: 60px;
background-color: green;
}
給父元素設(shè)定高度
分析：這種方法只適合高度固定的布局炉奴，需要給出精確的高度逼庞，不建議使用
2.給下一個添加clear屬性
#div1{
width: 400px;
border: 1px solid black;
}
#div1 .child{
width: 100px;
height: 120px;
background-color: orange;
margin-right: 20px;
float: left;
}
#div2{
width:400px;
height: 60px;
background-color: green;
clear: both;
}
給下一個添加clear屬性
分析：父元素的高度沒有被撐起來，設(shè)置的樣式可能會失效瞻赶，且margin屬性不再起作用
3.增加一道墻
我們可以在兩個父類之間增加一道墻使它們分開
<div id="div1">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="cl"></div>
<div id="div2"></div>
#div1{
width: 400px;
border: 1px solid black;
}
#div1 .child{
width: 100px;
height: 120px;
background-color: orange;
margin-right: 20px;
float: left;
}
#div2{
width:400px;
height: 60px;
background-color: green;
}
.cl{
height: 0;
line-height: 0;
clear: both;
}
添加一道墻
分析： 該方法彌補了margin屬性的問題赛糟，但父元素的高度仍然沒有被撐起
在第一個父元素內(nèi)部增加一道墻
<div id="div1">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="cl"></div>
</div>
<div id="div2"></div>
#div1{
width: 400px;
border: 1px solid black;
}
#div1 .child{
width: 100px;
height: 120px;
background-color: orange;
margin-right: 20px;
float: left;
}
#div2{
width:400px;
height: 60px;
background-color: green;
}
.cl{
height: 0;
line-height: 0;
clear: both;
}
添加一道墻
分析： 該方法解決了以上的問題，但使用額外的標簽會讓人感覺很不爽砸逊，這是以前主要使用的一種解決方法
4.使用after偽元素
#div1{
width: 400px;
border: 1px solid black;
}
#div1 .child{
width: 100px;
height: 120px;
background-color: orange;
margin-right: 20px;
float: left;
}
#div2{
width:400px;
height: 60px;
background-color: green;
}
#div1:after{
content: '';
display: block;
clear: both;
}
/*兼容IE*/
#div1{
zoom: 1;
}
使用after偽元素
分析： 推薦使用璧南，可以定義公共類來減少css代碼
5.利用overflow:hidden屬性
#div1{
width: 400px;
/*height: 300px;*/
border: 1px solid black;
overflow: hidden;
zoom: 1; /* 兼容IE */
}
#div1 .child{
width: 100px;
height: 120px;
background-color: orange;
margin-right: 20px;
float: left;
}
#div2{
width:400px;
height: 60px;
background-color: green;
}
overflow屬性
分析： overflow本意是將溢出盒子的內(nèi)容隱藏掉，但是仍可以用來做浮動的清除师逸。在不使用position屬性的時候可以使用該方法司倚。
另外還有使父元素浮動，父元素絕對定位篓像，父元素定義display:table等方法对湃，但都有相應(yīng)的問題，了解一下即可遗淳。
文章同步： levinhax's Github Blog
