清除浮動的常用方法

2021-06-29 01:21:30 字數 1169 閱讀 8659

先說不清除浮動的效果:

給父元素這只邊框都不會把他們包裹起來,俗稱高度塌陷。

然後說說幾個不常用的清除浮動方法,比如:

style="overflow:hidden">

style="float:left;">

div>

style="float:left;">

div>

div>

就是給父元素設定overflow屬性的那種,具體樣式就不寫了;

這個原理現在說一下。剛寫這篇文章的時候並不知道給父元素設定overflow:hidden為什麼可以防止高度塌陷。

要說明白這個問題首先需要知道bfc是個什麼鬼。具體參照bfc神奇背後的原理

這裡的原理就是:「overflow:hidden;「 使父元素成為了乙個bfc環境,bfc元素計算高度時,浮動元素也參與計算。

還有這種:

style="">

style="float:left;">

div>

style="float:left;">

div>

style="clear:both">

div>

div>

這種的是在浮動元素最後加乙個空的div然後給他清楚浮動,這個原理就是讓它左右兩邊都不挨著浮動元素,所以他就鑽到父元素的最下邊了,但是還是在父元素內,所以就把父元素給撐起來了。不會塌陷。效果如下:

還有:style="float:left;">

style="float:left;">

div>

style="float:left;">

div>

div>

給父元素也加浮動,這種方式是極不好的,會影響父元素的定位

還有一種極不好的,是給設定父元素的display屬性為table。這個table屬性的元素布局的時候坑太多了,所以這種清除浮動的方式是極不推薦的。

清除浮動的常用方法

1.給浮動元素父級設定高度 2.在最後乙個浮動標籤後,新加乙個標籤,將其樣式設定為 clear both 3.在父級元素新增樣式 overflow hidden 此方法會將多出的內容裁切掉,無法顯示要溢位的元素 4.使用before和after雙偽元素清除浮動,使用偽元素清除浮動必須是塊級元素上使用...

清除浮動的常用方法

方法一 對收到影響的元素進行設定,哪側受到浮動的影響就清除哪側,clear both clear left clear right 方法二 同時設定100 或固定寬度 overflow hidden 嘗試一下 如何使得p標籤內容跟div標籤的不同一行呢?doctype html html lang ...

常用的清除浮動的方法

此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 三種清除浮動方法如下 1 使用空標籤清除浮動。我用了很久的一種方法,空標籤可以是div標籤,也可以是p標籤。我習慣用,夠簡短,也有很多人用,只是需要另外 為其清除邊框,但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元...