有時我們需要用到浮動,但又不想由于浮動的某些特性影響布局,這時就需要清除浮動
清除浮動主要應用的是CSS中的clear屬性,clear屬性定義了元素的哪一側不允許出現浮動元素.
下面是兩種應用比較廣泛的清除浮動的方法:
// 在需要的地方添加定義了clear:both的空标簽
<style>
html body div.clear,
html body span.clear
{
background: none;
border: 0;
clear: both; /* 這句是重點, 其他都是相容性代碼 */
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* 在需要清除浮動的元素後面添加 <div class="clear"> </div> 即可 */
上面是一個"萬能"的清除浮動代碼,可以在不同的浏覽器下相容
// 對父元素使用:after僞類
.clearfix:after {
content: "020";
display: bloack;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
.left {
float: left;
}
.right {
float: right;
}
<div class= "div1 clearfix">
<div class="left">Left</div>
<div class="right>Right</div>
</div>
/* 使用調試工具可以看到,父元素的高度不再為0了 */
參考 《CSS高效開發實戰》P21