1、BFC描述:
如何开启BFC:
1)根元素
2)浮动元素
3)绝对定位、固定定位的元素
4)行内块元素
5)表格单元格: table、thead、 tbody、tfoot、th、td、tr、captionoverflow 的值不为 visible 的块元素
6)伸缩项目
7)多列容器
8)column-span 为all的元素(即使该元素没有包裹在多列容器中)
9)display 的值,设置为 flow-root
2、开启BFC能解决的问题:
1)元素开启BFC后,其子元素不会再产生 margin 塌陷问题
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 400px;
background-color: gray;
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
.inner3 {
background-color: deepskyblue;
}
</style>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
解决方案:
2)元素开启BFC 后,自己不会被其他浮动元素所覆盖。
<style>
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: orange;
float: left;
}
.box2 {
background-color: green;
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
解决方案:
3)元素开启BFC后,就算其子元素浮动,元素自身高度也不会塌陷
<style>
.outer {
width: 400px;
background-color: grey;
}
.inner {
width: 100px;
height: 100px;
float: left;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
</style>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</div>
</body>
解决方案: