(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.給父級設...