BFC的学习理解

BFC

格式化上下文本：页面中的一块渲染区域，有自己的规则，决定了元素的位置和其他元素的关系。具有BFC的元素相当于是一个独立的容器，这个元素不会影响到外面的元素，并具有一些其他的属性

触发的方式

1.body根元素

2.浮动元素，除float值为none的时候以外的值

3.决定定位元素，positon(absolute fiex)

4.display为line-block flex

5.overflow除了visible以外的值 hidden auto scroll

两个盒子之间的外边距发生重叠

样式

.box1{

width: 200px;

height: 200px;

border: 1px solid red;

margin-bottom: 100px;

}

.box2{

width: 50px;

height: 50px;

border: 1px solid gold;

margin-top: 50px;

}

结构

<div class="box1"> </div>

<div class="box2"></div>

盒子之间的距离是100px

解决方式 距离为150px

样式

.box{

overflow: hidden;

}

.box1{

width: 200px;

height: 200px;

border: 1px solid red;

margin-bottom: 100px;

}

.box2{

width: 50px;

height: 50px;

border: 1px solid gold;

margin-top: 50px;

}

结构

<div class="box">

<div class="box1"> </div>

</div>

<div class="box">

<div class="box2"></div>

</div>

BFC可以包含浮动的元素（清除浮动）

样式

.box1{

border: 1px solid red;

}

.box2{

width: 20px;

height: 20px;

background-color: black;

folat：left；

}

容器内元素浮动，脱离了文档流，所以容器只有2px宽度的边框

如果让容器触发BFC 那么容器就会包裹着浮动的元素

样式

.box1{

border: 1px solid red;

overflow: hidden;

}

.box2{

width: 20px;

height: 20px;

background-color: black;

float: left;

}

BFC可以阻止元素覆盖

<div style="height: 100px; width: 100px;float: left; background-color: #eee;">我是一个浮动的元素</div>

<div style="width: 200px; height: 200px;background-color: blue;">

我是一个没有浮动的元素，也没有触发BFC元素，width: 200px; height: 200px;

</div>

解决

/*清除浮动 触发BFC */

<div style="height: 100px; width: 100px;float: left; background-color: #eee;">我是一个浮动的元素</div>

<div style="width: 200px; height: 200px;background-color: blue; overflow: hidden;">

我是一个没有浮动的元素，也没有触发BFC元素，width: 200px; height: 200px;

</div>

如果把第二个元素的宽度和高度去掉，可以实现左边固定宽度，右边宽度自适应的两栏布局