BFC : 页面上的一个隔离的独立渲染区域(常用于解决边距重叠 高度坍陷 margin塌陷 文本环绕)
区域里面的子元素不会影响到外面的元素 外面的元素也不会影响到区域里面的子元素
float:left right
Position absolute fixed
display inline-block table-cell
overflow:hidden auto scroll
- 解决边距重叠
<style>
.box{
overflow:hidden;
}
.box1{
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box .box2{
width: 100px;
height: 100px;
margin-top:100px
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box">
<div class="box1"></div></div>
<div class="box">
<div class="box2"></div>
</div>
- 高度塌陷
<style>
.box{
width: 200px;
border: 10px solid #000;
overflow: hidden;
}
.box1{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
- margin塌陷
<style>
.box1{
border-top: 1px solid transparent;
width: 300px;
height: 300px;
background-color: #000;
}
.box2{
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
background-color: orange;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
- 文本环绕 (同理添加BFC属性)