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