高度塌陷與 BFC

2022-09-18 07:12:28 字數 473 閱讀 7322

在浮動布局中,父元素的高度預設是被子元素撐開的

當子元素浮動後,其會完全脫離文件流,子元素從文件流中脫離將會無法撐起父元素的高度,導致父元素的高度丟失

父元素高度丟失以後,其下的元素會自動上移,導致頁面的布局混亂

clear作用:清除浮動元素對當前元素所產生的影響(本質是為元素新增乙個margin-top屬性,值由瀏覽器自動計算)

可選值:

left 清除左側浮動元素對當前元素的影響

right 清除右側浮動元素對當前元素的影響

both 清除兩側中影響較大一側元素的影響(注意,這裡不是同時清除兩側的影響)

hidden等可以為元素開啟 bfc(有一定的弊端和隱患)

元素::after

元素::before

元素::before,

元素::after

高度塌陷問題,一般用::after

外邊距重疊問題,一般用::before

css的BFC高度塌陷和居中

一 css外邊距重疊的解決方法 兩個或多個塊級盒子的垂直相鄰邊界會重合。1 兄弟級 當乙個元素出現在另乙個元素上面,也就是兩個垂直外邊距相遇時 只有垂直的才會發生 1.調高margin 2.padding 父子級元素 當乙個元素包含在另乙個元素中時,如果外面大的那個元素沒有內邊距或者邊框,那麼這兩個...

CSS 浮動,高度塌陷和BFC,清除浮動

通過浮動,可以使乙個元素向其父元素的左側或右側移動,使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流,不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時,不會超過...

CSS中解決高度塌陷(開啟BFC)的問題

在div中使用float時,經常會碰到父級標籤高度塌陷的問題,這個時候我們就需要開啟父級標籤的bfc模式來解決高度塌陷的問題。解決高度塌陷有以下三種方法 第一 在父級標籤的css中加入以下 overflow hidden 第二 在父級標籤中加入乙個div標籤,類名為clear,給標籤設定以下css ...