常見清除浮動的4種方法 前端面試題

2021-10-08 20:00:09 字數 1405 閱讀 2817

浮動元素脫離文件流,不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。

這種方法是在所有浮動標籤後面新增乙個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。

額外標籤法div

>

div>

class

="footer"

>

div>

body

>

html

>

2.使用after偽物件清除浮動

該方法只適用於非ie瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0,否則該元素會比實際高出若干畫素;

#parent:after

3.父元素新增overflow:hidden,觸發bfc(塊級上下文)機制,實現清除效果

```html

```html

.fahter

4.使用before和after雙偽元素清除浮動

```html

```html

.clearfix:after,.clearfix:before

.clearfix:after

.clearfix

bigsmall

前端 清除浮動 五種方法

box1,box2,box3 box1 box2 box3 class box1 div class box2 div style clear both div class box3 div body 在最後乙個浮動元素後面增加 bigbox box1 box2 box3 class bigbox ...

CSS清除浮動4種方法

是為了解決 父元素因為子元素浮動而引起的內部高度為0的問題。布局 盒子1 盒子2 大盒子 樣式 盒子1和2都設定浮動後 big,small1.額外標籤法在最後乙個浮動標籤後,新加乙個標籤,給其設定clear both big small 額外標籤法 css clear 優點 通俗易懂,方便 2.父元...

css清除浮動4種方法

因為浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。解決浮動引起的問題有多種方法,但有些方法在瀏覽器相容性方面還有問題。left right div2 原理 父級div手...