css3复习P6（BFC）

什么是BFC

BFC：Block formatting context直译为块级格式化上下文，可以看作是css中隐藏的一个属性，当元素拥有这个属性时，就会称为一块独立的渲染区域，不会影响其他元素；

怎么开启BFC

①设置浮动

②position的值为absolute或fixed

③display设置为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid

④overflow的值不为visible的元素

开启BFC之后的特点

①避免外边距的重叠

<div class="cube"></div>
<div class="cube"></div>

.cube{
 	width: 100px;
	height: 100px;
	background-color: cyan;
	margin: 100px;
}

解决：
把两个div包裹在两个不同container容器中，用overflow-hidden触发container的BFC

.container{
     overflow: hidden;
}

②清除浮动

<div class="parent">
     <div class="child"></div>
</div>

.parent{
    border: 10px solid red;
}
.child{
    width: 100px;
    height: 100px;
    background-color: cyan;
    float: left;
}

解决：

.parent{
   border: 10px solid red;
   overflow: hidden;
}

③阻止元素被浮动元素覆盖

<div class="cube1"></div>
<div class="cube2"></div>

.cube1{
   width: 100px;
   height:100px;
   background-color: cyan;
   float: left;
}
.cube2{
   width: 200px;
   height:200px;
   background-color: red;
}

解决：

.cube2{
      width: 200px;
      height:200px;
      background-color: red;
      overflow: hidden;
}