margin塌陷
body：
<body>
<div class="fu">
<div class="zi">
</div>
</div>
</body>
* {
margin: 0px;
padding: 0px;
}
.fu{
background-color: cyan;
height: 200px;
width: 200px;
}
.zi{
background-color: #ff0000;
height: 50px;
width: 50px;
}
1.如果給子盒子加margin-top：
.zi{
background-color: #ff0000;
height: 50px;
width: 50px;
margin-top: 70px;
}
? 帶著父盒子一起下移，這就是邊界塌陷吧？正常情況下,父級(jí)元素應(yīng)該相對(duì)瀏覽器進(jìn)行定位,子級(jí)相對(duì)父級(jí)定位.
? 但由于margin的塌陷,父級(jí)相對(duì)瀏覽器定位.而子級(jí)沒有相對(duì)父級(jí)定位,子級(jí)相對(duì)父級(jí),就像坍塌了一樣.
解決辦法：
1.給父盒子加上border：不建議使用
.fu{
background-color: cyan;
height: 200px;
width: 200px;
border: 1px solid black;
}
2.觸發(fā)bfc，"塊級(jí)格式化上下文"
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC布局規(guī)則：
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
-
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
哪些元素會(huì)生成BFC?
float:left/right 浮動(dòng)元素
position為absolute或fixed 絕對(duì)定位元素
display為inline-block, table-cell, table-caption, flex, inline-flex 非塊級(jí)盒子的塊級(jí)容器
overflow:hidden overflow的值不是visible
副作用:
1、display: table 可能引發(fā)響應(yīng)性問題
2、overflow: scroll 可能產(chǎn)生多余的滾動(dòng)條
3、float: left 將把元素移至左側(cè)，并被其他元素環(huán)繞
4、overflow: hidden 將裁切溢出元素
