讓頁面呈現多列布局時經常會使用 float:left/right ，可是浮動布局會導致父元素的高度為0（未設定高度的情況下），不會根據子元素的高度而變化，另外，後面不需要浮動想在下一行顯示的標籤出現在浮動元素的後面。
所以我們在使用浮動進行布局的時候會需要乙個塊級元素（行內元素無效）來設定 clear 屬性，如果浮動元素下方本來就有元素，那我們可以直接對該元素設定 clear:both ，若沒有其他元素需要展示，我們往往會寫乙個空白標籤來清除浮動
<但是這樣無疑會增加瀏覽器的渲染負擔，所以考慮使用偽元素 :after 來代替這個空白標籤，因為清除浮動需要在浮動元素後面，所以不可以使用 :before ，對 :after 設定 content:"" ，並使其 display:block 成為塊級元素後 clear:both 來清除浮動：div
style
="clear:both"
>
div>
#content:after該方法在 ie6、7 中無效，需要對 #content 設定 zoom:1。
8偽元素 清除浮動
偽元素選擇器選擇器 after 在內容後面新增 選擇器 before 在內容前面新增 選擇器 設定第乙個字的樣式 選擇器 設定第一行的樣式 注 只針對塊級元素浮動元素父元素高度自適應 高度塌陷 高度塌陷 父元素未設定高度，子元素浮動，將造成高度消失，布局混亂 清除浮動 清除浮動帶來的影響 解決辦法1...
HTML偽元素 用偽元素清除浮動流
1.偽元素 可以當做html標籤用css樣式來操作，但是沒有html結構 1 任何乙個元素都有偽元素，可以當做正常元素來使用。2 before 在標籤的邏輯之前 after 在標籤的邏輯之後 3 通過css選擇器選中偽元素，對偽元素進行修改，而不是通過css創造了偽元素。4 content設定偽元素...
雙偽元素清除浮動理解
執行的效果 好了 現在讓 box2 box3 新增向左浮動的樣式 box2 box3 都脫離了標準文件流 box4 網上頂 緊貼box1下方 此時 box1與 box4是新的 標準文件流 2，如果box4也加上左浮動 將會是這樣 box4浮動 而工作中 希望 box4在box1和box2的下方 這時...