BFC

//css重点内容为布局+盒子模型。

BFC（Block formatting context）块级格式化上下文

1. 产生BFC的条件
display属性为block,list-item,table的元素，会产生BFC

2. 触发条件的几种情况，来产生BFC

-float属性不为none
-position为absolute或fixed

-display为inline-block,table-cell,table-caption,flex,inline-flex

-overflow不为visible

3. BFC元素具有的特性

-盒子垂直排列

-盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
-在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）

1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。

2. 计算BFC的高度时，自然也会检测浮动活着定位的盒子高度。
3. 他是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

白话文：孩子在家里愿意怎么折腾都行，但是出了家门，你就得乖乖的，不能影响外面的任何人。

4. BFC的主要用途
-清楚元素内部浮动
-解决外边距合并问题

-制作右侧自适应盒子问题

BFC总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局就不会出现意外情况了。

扫一扫，支持我一下^_^