BFC的作用以及使用

BFC
块格式化上下文
是web页面的可视化css渲染的一部分
是块盒子的布局发生区域也是浮动元素与其他元素交互的区域。

个人理解:
1.BFC是一个独立的布局环境,BFC内部元素布局与外部元素互不影响。
2.可以通过一些条件触发BFC,从而实现我们布局上的需求和解决一些问题.
可以把BFC理解成一个工具,无需纠结其中的含义,只需了解它的特性即可.

触发条件:
1.根目录
2.float 的值非none
3.overflow的值非visible
4.display的值是inlin-block,table-cell,table-caption,fiex,inline-fiex.
5.position的值是fixed,absolute.

BFC特性
1.属于同一个BFC的两个相邻容器的上下margin会重叠
2.计算BFC高度时浮动元素也会参与计算
3.BFC的容器不会与浮动容器发生重叠
4.BFC内的容器在垂直方向上依次排列
5.元素的margin-left与其包含的边框相接触.
6.BFC是独立容器,容器内部元素不会影响容器外部元素.
overflow: hidden; 溢出部分:隐藏;

1.解决父元素高度塌陷问题，

浮动元素会导致父元素高度坍塌，如果一个没有高度的块级元素的子元素浮动的话，则这个块级父元素的高度为0，因为子元素浮起来了，脱离了普通文档流和父级元素不在同一个层面上所以父级元素无法包裹住子元素

2.解决外边距合并问题

在BFC中，盒子从顶端开始垂直的一个一个排列，盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠

3.解决右侧盒子自适应问题