clearfix清除浮動閉合容器之:after與:before
阿新 • • 發佈：2019-01-09
首先對偽類:before與:after做下注腳
:before 偽元素在元素之前新增內容。
:after 偽元素在元素之後新增內容。
這2個偽元素允許創作人員在元素內容的 最前面/最後面 插入生成內容。預設地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點。該二偽類不被IE6/7所支援。
好了，進入正題
在平常我們coding時候經常會發生子元素浮動而引起父級元素不能完全撐開的狀況，
可能很多朋友給父級元素用overflow:hidden簡單粗暴的解決，但這種方式有弊端，一是在IE6下不能完美解決，二是假如在該模組有定位的層就有定位層顯示不完整的可能。
也有可能有些朋友是在父級元素裡最後新增一個<div style=”clear:both”></div>來解決這個問題，但這樣我們的HTML程式碼裡就多了些冗餘的程式碼且從語義化角度來看這也是不合理的。
下面建立一個.clearfix類來完美解決這個問題
上程式碼：
<pre>.clearfix:after {content:
".";display:
block;height:
0;clear:
both;visibility:
hidden;}
* html .clearfix{zoom:1;}
/* IE6 */
*+html .clearfix{zoom:1;}
/* IE7 */
|
快給你的不能完全閉合的父級元素加上.clearfix類試試吧