css BFC

1. bfc

BFC(Block formatting context) 中文：块级格式化上下文

2.如何创建bfc

一个html元素满足以下的条件中的一条都可以：

float:left;

overflow:auto/hidden/scroll;

display:inline-block/table-cell/flex/inline-flex

position:absolute/fixed

BFC有一下特性：

内部的Box会在垂直方向，从顶部开始一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box叠加。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，浮动元素也参与计算。

在哪些场景可以用到BFC：

自适应两栏布局：

.content{width:500px;height:500px;background-color: #cccccc;}

.content_img{float:left;width:100px;height:100px;margin-right:10px;}

.content_txt{overflow: auto;zoom: 1;width:300px;height:100px;background:yellow}

效果：

清除内部浮动:

css：

dom

效果：

明显这个不是我们要的结果

对 content_box添加 overflow:hidden;

清除垂直margin 重叠：

相应的margin,已经发生了重叠了

把子元素再次包在bfc中

当他们不处于同一个bfc时，他们之间不会有边距的重叠