margin塌陷：存在父子關係的塊級元素之間，在垂直方向上共用（誰的margin大用誰的）乙個margin。
margin合併：存在兄弟關係的塊級元素之間，在垂直方向上共用（誰的margin大用誰的）乙個margin。（不會對開發造成太大影 響，可以不去解決他）
bfc： block format context
bfc的元素會改變一點點原來所應該遵循的語法規則。然後就能解決上述的margin塌陷/合併問題。
設定塊級元素的下列屬性之一就會觸發bfc：（至於具體用哪個去解決margin塌陷/合併問題，根據情況選擇）
position：absolute
display：inline-block
float：left/right
overflow：hidden
浮動：在子元素上加float：left/right屬性就可以實現浮動。如果浮動元素不能一行展示，那麼會自適應換行。
浮動元素產生了浮動流，所有產生浮動流的元素，塊級元素看不到他們，產生了bfc的元素，文字類（inline-block）元素以 及文字都能看得見浮動元素。
浮動會帶來的問題：父級元素是看不見浮動元素的塊元素，子元素是浮動元素。那麼父級元素就包裹不住子元素。
如何解決：
1.在子元素的最後再結構中新增乙個p標籤，然後在p標籤中設定css屬性：clear：both/left/right。（但是這樣更改了html** 不建議這樣用）
2.給父級元素中的偽元素新增css屬性clear：both/left/right來清除浮動流。必須是塊級元素clear才能生效。
3.把父級元素變成bfc元素，這樣它就能看得見子元素（浮動元素）了。
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
BFC和margin塌陷問題
margin塌陷 父子元素之間垂直方向的margin會粘合到一起，取最大的那個值 解決方法 優缺點給父級加乙個 border top 1px solid red 不專業，盡量不用 bfc block format context 塊級格式化上下文 如何觸發乙個盒子的bfc 語法給父級設定絕對定位 p...
margin塌陷以 及 margin合併
3.乙個空元素，沒有border和padding 3.margin合併解決方法 總結 margin 合併就是，當兩個垂直margin相遇時，它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...