在CSS中，父元素中的子元素如果使用了float，會導致父元素塌陷，高度為0。

　　對于這種情況，常見的解決方式有兩種。

一、增加新的div，應用clear:both屬性

html:

1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 <div class="clear"></div> 6 </div>

css:

1 .clear { 2 clear:both; 3 height:0; 4 }

二、利用:after來清除浮動

原理：這種方法的原理是利用偽類:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其原理類似第一種方式，但區別在于這種方式是利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。

首先需要給父元素添加一個.clear類

css如下

.clear:before, .clear:after {content: '';display: table; } .clear:after {clear: both; } .clear {*zoom: 1; //兼容IE6、IE7 }

?

　　

轉載于:https://www.cnblogs.com/tgxh/p/6135615.html

總結

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

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