BFC和margin塌陷問題

2022-07-25 13:33:24 字數 801 閱讀 1316

(margin塌陷)父子元素之間垂直方向的margin會粘合到一起,取最大的那個值;

解決方法

優缺點給父級加乙個 border-top: 1px solid red

不專業,盡量不用

bfc(block format context)塊級格式化上下文

如何觸發乙個盒子的bfc

語法給父級設定絕對定位

position: absolute

給父級設定行級塊元素

display: inlinebolck

給父級設定設定浮動

float: left/right

給父級新增溢位隱藏

overflow: hidden

通過bfc解決margin塌陷問題時會出現新的問題,解決方法並不完美,只能針對需求選擇方法

解決方法

優缺點給它們新增乙個父級然後給父級使用bfc

更改了結構

不解決(通過數學的方法計算)

解決父級包住方法

// 在浮動元素的後面新增乙個標籤

.content

.clear

clear: both;是清除浮動流

通過偽元素清除浮動;最標準的寫法

content="";

display: block;

clear: both;

}注意:clear只有在塊級元素上才能用,偽元素是行級元素要設定display: block

###給設定 float: left; 就可以實現文字環繞的效果

margin塌陷 合併 BFC 浮動流

margin塌陷 存在父子關係的塊級元素之間,在垂直方向上共用 誰的margin大用誰的 乙個margin。margin合併 存在兄弟關係的塊級元素之間,在垂直方向上共用 誰的margin大用誰的 乙個margin。不會對開發造成太大影 響,可以不去解決他 bfc block format cont...

CSS中的BFC 與 margin塌陷

一 css中的bfc bfc 直譯為 塊級格式化上下文 他是乙個獨立的渲染區域,只有block level box參與,它規定了內部的block level box如何布局,並且與這個區域外部毫不相干。bfc布局規則 1.內部的box會在垂直方向,乙個接乙個地放置。2.bfc的區域不會與float ...

margin塌陷和margin合併問題及解決方案

父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...