css基礎 清除浮動的一些方法及區別

2021-08-13 14:51:44 字數 949 閱讀 7811

為什麼要清楚浮動?

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

.ovh

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

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

方式二:使用額外標籤法

.clear

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

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

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

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

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

.clearfix:after

.clearfix

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

.clearfix:before,.clearfix:after

.clearfix

總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動並且保留超出部分時做不到,特別是對於元素內有定位屬性的元素。

第二種方法會增加許多不必要的標籤,也不便於後期維護,並且不符合結構、表現、行為相分離的標準。

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

浮動及清除浮動的方法

浮動元素脫離文件流,不佔據空間。浮動元素直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。1 使用空標籤清除浮動 在所有浮動標籤後面新增乙個空標籤定義cssclear both.弊端就是增加了無意義標籤,影響文件結構美觀性。1 div style clear both div 2 使用overflo...

css中的浮動及清除浮動

float 文件流1.float left right none inherit 2.文件流是文件中可顯示物件在排列時所占用的位置。3.浮動的定義 在非ie瀏覽器下,當容器的高度為auto,且容器中的內容中有浮動的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影...

CSS清除浮動的方法

給元素設定了float屬性後脫離了文件流,不佔據位置,所以其父級無法將其包裹,需要清除浮動。段 box item style class box class item div div 效果 方法一 給父級設定高度 段 box 問題解決 缺點 擴充套件性不好,沒有解決根本問題 方法二 給父級加上flo...