我想问一个关于BFC的问题,请看我的代码:
<div class="main">
<div class="aside"></div>
</div>
.main{
height: 200px;
background-color: green;
width: 300px;
margin:100px 0;
}
.aside{
width: 100px;
height: 150px;
background-color: red;
margin:100px 0;
}
为什么main可以添加新的BFC(set css overflow:hidden;)但是aside就不能添加新的BFC(set css overflow:hidden;
)了呢。BFC也在变化路?
最佳答案
Vertical margins between adjacent block-level boxes in a block formatting context collapse.
边距在以下三种情况下崩溃:
1.垂直
2.相邻的 block 级框
3.在BFC中
.aside
的样式为overflow: hidden
以为其后代生成 BFC。但是,它不会影响 .aside< 外部的布局
。也就是说,.main
和 .aside
仍在本例中由根元素生成的 BFC 中,因此边距折叠。
关于html - BFC margin 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36529945/