清除CSS float的方法

2021-08-18 07:45:34 字數 901 閱讀 1822

關於清除浮動的四種方法

浮動對頁面的影響:

如果乙個父盒子中有乙個子盒子,並且父盒子沒有設定高,子盒子在父盒子中進行了浮動,那麼將來父盒子的高度為0.由於父盒子的高度為0,

下面的元素會自動補位,所以這個時候要進行浮動的清除。

關於清除浮動的方式:

方式一:使用overflow屬性來清除浮動

.ovh

先找到浮動盒子的父元素,再在父元素中新增乙個屬性:overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

注意:一般情況下也不會使用這種方式,因為overflow:hidden有乙個特點,離開了這個元素所在的區域以後會被隱藏(overflow:hidden會將超出的部分隱藏起來).

方式二:使用額外標籤法

.clear

在浮動的盒子之下再放乙個標籤,在這個標籤中使用clear:both,來清除浮動對頁面的影響.

a.內部標籤:會將這個浮動盒子的父盒子高度重新撐開.

b.外部標籤:會將這個浮動盒子的影響清除,但是不會撐開父盒子.

注意:一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤,造成結構的混亂.

方法三:使用偽元素來清除浮動(after意思:後來,以後)

.clearfix:after

.clearfix

方法四:使用雙偽元素清除浮動

.clearfix:before,.clearfix:after

.clearfix

總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動並且保留超出部分時做不到,第二種方法會增加許多不必要的標籤,

所以我們盡量使用第三種方法來清除浮動,為什麼不選擇第四種方法呢?因為第四種是第三種的改良版雖然比較簡便,但是不

嚴謹!

CSS float(浮動)和清除浮動

float元素也稱為浮動元素,設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。簡單來說,就是讓block元素無視float元素,讓inline元素讓流水一樣圍繞著float元素來實現浮動布局。1 背景不能...

css float遇到的問題

float的一些問題 前面的元素使用float時,會和後乙個元素水平對齊,這時候可以在後乙個元素css中加clear both left right 意思就是該元素不允許兩邊 左邊 右邊有浮動元素。詳情可以自己去查。然後後乙個元素會頂在前乙個元素後面,就無論後乙個元素margin top多少或者pa...

清除浮動的方法

1 給父元素加height 2 給父元素加浮動 絕對定位 固定定位 3 給父級元素加display inline block 4 給浮動元素下加 clear 5 給浮動元素下加 這個不符合w3c的標準,樣式,結構,行為分離。6 給浮動元素的父級元素加 clear 觸發ie7中的haslayout屬性...