8偽元素 清除浮動

2021-10-12 07:33:31 字數 450 閱讀 5585

偽元素選擇器

選擇器: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的下方 這時...