CSS清除浮動

2021-10-03 04:06:13 字數 1000 閱讀 7083

在乙個父元素內如果遇到某個浮動的元素,此時父元素的高度會發生塌陷。這時我們已經有了許多解決的方案。下面由我來介紹各種解決方法。

clear屬性規定元素的哪一側不允許其他浮動元素。

本質:在css2.1中,clear屬性會給清除元素(即設定了clear屬性的元素)的上外邊距之上新增清除空間,而元素本身的外邊距並不改變。再說的詳細一些,也就是給元素設定clear:left|right|both時,會使清除元素的上外邊距邊界剛好在該邊上浮動元素的下外邊距邊界之下。

2.overflow

在父元素中設定overflow:hidden|auto|scroll可以解決父元素高度塌陷的問題。為什麼可以通過overflow來解決父元素高度塌陷的問題?這裡涉及到了另外乙個知識點,也就是bfc(塊級格式化上下文)

前後對比:

3.:after偽元素

在父元素上增加:after偽元素,可以解決父元素高度塌陷的問題。

//css

.content

}.float

放到瀏覽器上高度顯示正常

這裡介紹了三種清除浮動帶來的額外影響的三種方法,這裡所說的額外影響指的是浮動元素給兄弟元素和父元素帶來的影響。這裡做乙個小小的總結:

新增空div和:after偽元素的有乙個共同的思想:就是使用clear屬性。clear屬性會給清除元素(即設定了clear屬性的元素)的上外邊距之上增加清除空間,而元素本身外邊距並不改變。並且會使清除元素的上外邊距的邊界剛好在浮動元素的下外邊距邊界之下。所以才能達到清除浮動帶來額外影響的效果。

父元素使用overflow不為visible,也就是設定overflow:hidden|auto,此時也可以達到清除浮動的效果。這裡涉及到bfc的概念。

逆戰班 呂瑩

feb23

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...

CSS清除浮動 清除float浮動

一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不能撐開,這樣浮動就產生了...