清除浮動的方法

1.額外標簽法（隔墻法）

在浮動的最后一個標簽寫一個空標簽

.first .second {float: left; }.clear {clear: both; }<div class="box"><div class="first">第一個div</div><div class="second">第二個div</div><div class="clear"></div> </div>

優點：

通俗易懂，書寫方便

缺點：

添加許多無意義的標簽，結構比較差

2. 使用css給父元素添加 overflow 屬性(溢出隱藏)

.box {overflow: hidden; // 清除浮動,overflow的屬性值有：hidden、auto、scroll }<div class="box"><div class="first">第一個div</div><div class="second">第二個div</div><div class="clear"></div> </div>

優點：

簡潔

缺點：

無法顯示溢出部分

3. :after 偽元素法

/*:after偽元素法清除浮動*/ .clearfix::after {content: "";display: block;height: 0px;clear: both;visibility: hidden; }.clearfix {/*IE6,7 專有*/*zoom: 1; } <div class="box clearfix"> // 為父類添加清除浮動類<div class="first">第一個div</div><div class="second">第二個div</div><div class="clear"></div> </div>

4. 雙偽元素法清除浮動(推薦)

/*雙偽元素法清除浮動*/ .clearfix:before, .clearfix:after {content: "";display: table; }.clearfix::after {clear: both; }.clearfix {*zoom: 1; } <div class="box clearfix"> // 為父類添加清除浮動類<div class="first">第一個div</div><div class="second">第二個div</div><div class="clear"></div> </div>

總結

以上是生活随笔為你收集整理的清除浮动常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。