...

原理： Html每一個標簽前后都會存在前后節點::before、::after, 前后節點設置一個塊狀空元素來清空容器的浮動效果； 實現： <div class='clearfix'></div> //空 ...

/css"> /* 聲明清除浮動的樣式 */ .clearfix:after { content: " ...

1、清除浮動的原因 （1）不清除浮動的情況： 由於父級的子元素不方便給高度（不給高度的時候父盒子的大小由里面包含的子盒子來決定），但是，子元素為浮動的又不占有位置，導致父級的盒子高度為0的時候就會影響下面的標准流的盒子。 由於浮動元素不占有原來的文檔流的位置 ...

使用方法： 優點： 代碼更簡潔 缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。 代表網站： 小米、騰訊等 ...

利用偽元素:after清除浮動 讓頁面呈現多列布局時經常會使用 float:left/right ，可是浮動布局會導致父元素的高度為0（未設置高度的情況下），不會根據子元素的高度而變化，另外，后面不需要浮動想在下一行顯示的標簽出現在浮動元素的后面 ...

1.first-line偽元素：向文本的首行設置特殊格式； 注意：　只能用於塊級元素；　 　　 　　可應用於first-line偽元素的屬性：font,color,background，word-spacing，letter-spacing ...

今天偶然看到一個關於使用偽元素:before和:after清除浮動的問答，覺得很不錯，特此記錄一下。 原文出處：https://segmentfault.com/q/1010000000530778 先給出一個demo 由於父容器內有了浮動元素 div 的緣故，導致父容器 ...