執行的效果好了 現在讓 box2 box3 新增向左浮動的樣式
box2 box3 都脫離了標準文件流 box4 網上頂 緊貼box1下方 此時 box1與 box4是新的 標準文件流
2，如果box4也加上左浮動 將會是這樣
box4浮動 而工作中 希望 box4在box1和box2的下方
這時 我們需要用到清除浮動 在box1和box2的父元素上加上 新增 clear 類
.clear:after執行效果
看 box4 直接掉下了在box1和box2下方
達到了我們的目的
問題來來了 如果我們給box1新增向左浮動的 效果是這樣的
此時 我們 新增 clear類 如下
.clear:after,.clear:before執行效果是這樣的成功的利用 雙偽元素 清除了浮動
想要進一步 理解可 遇到這兩篇文章
8偽元素 清除浮動
偽元素選擇器選擇器 after 在內容後面新增 選擇器 before 在內容前面新增 選擇器 設定第乙個字的樣式 選擇器 設定第一行的樣式 注 只針對塊級元素浮動元素父元素高度自適應 高度塌陷 高度塌陷 父元素未設定高度，子元素浮動，將造成高度消失，布局混亂 清除浮動 清除浮動帶來的影響 解決辦法1...
HTML偽元素 用偽元素清除浮動流
1.偽元素 可以當做html標籤用css樣式來操作，但是沒有html結構 1 任何乙個元素都有偽元素，可以當做正常元素來使用。2 before 在標籤的邏輯之前 after 在標籤的邏輯之後 3 通過css選擇器選中偽元素，對偽元素進行修改，而不是通過css創造了偽元素。4 content設定偽元素...
利用偽元素 after清除浮動
讓頁面呈現多列布局時經常會使用 float left right 可是浮動布局會導致父元素的高度為0 未設定高度的情況下 不會根據子元素的高度而變化，另外，後面不需要浮動想在下一行顯示的標籤出現在浮動元素的後面。所以我們在使用浮動進行布局的時候會需要乙個塊級元素 行內元素無效 來設定 clear 屬...