清除浮動帶來的額外影響
如果對于浮動不熟悉的同學(xué)，可以看看介紹float的文章。傳送門：CSS float
我們知道，在一個父元素內(nèi)如果遇到某個浮動元素，此時父元素的高度會發(fā)生塌陷。針對父元素高度塌陷的問題，現(xiàn)在已經(jīng)有了很多的解決方案。針對每一個方案，我們來進(jìn)行深度的剖析。
添加空塊級元素
這種方法比較容易，但是要注意的是這個空元素必須是一個塊級元素，不能是行內(nèi)元素或者是行內(nèi)塊元素。缺點(diǎn)就是多了一些沒有意義的標(biāo)簽。代碼如下。
//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屬性的本質(zhì)。
