清除浮動帶來的額外影響

如果對于浮動不熟悉的同學,可以看看介紹float的文章。傳送門:CSS float

我們知道,在一個父元素內如果遇到某個浮動元素,此時父元素的高度會發(fā)生塌陷。針對父元素高度塌陷的問題,現(xiàn)在已經有了很多的解決方案。針對每一個方案,我們來進行深度的剖析。

添加空塊級元素

這種方法比較容易,但是要注意的是這個空元素必須是一個塊級元素,不能是行內元素或者是行內塊元素。缺點就是多了一些沒有意義的標簽。代碼如下。

//HTML <div class="content"> <div class="float"> </div> <div class="clearfix"></div> //用于清除浮動的元素必須是塊級元素 </div> //CSS .content {  background:pink;
}
.clearfix {  clear: both;
}
.float {  width: 50px;  height: 50px;  float: left;  background: tan;
}

之所以可以使用clear屬性清除浮動帶來的額外影響,還要回歸clear屬性的本質。

延伸閱讀

學習是年輕人改變自己的最好方式-Java培訓,做最負責任的教育,學習改變命運,軟件學習,再就業(yè),大學生如何就業(yè),幫大學生找到好工作,lphotoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓學習是年輕人改變自己的最好方式