BFC基本概念

BFC叫做块级格式化上下文，本质是在一个独立的渲染区域，单独规定区域内部的渲染规则。

 

BFC的布局规则

1.BFC区域不会与外部区域发生相互影响。

2..BFC内部的盒子，会在垂直方向依次排列。垂直方向上也会发生边距重叠。

3.BFC的区域不会与外部float重叠。

4.计算BFC的高度时，内部浮动元素也被计算在内。

BFC的创建

1.float：right\left

2.position:absolute\fixed\sticky

3.display:inline-block\flex等

4.overflow:hidden\scoll,非visible

visible：内容不会被修剪，会呈现在元素框之外，这是默认的值。
hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：由浏览器决定如何显示。如果需要，则显示滚动条。

BFC用途

1.边界重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

兄弟关系，同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

2.清除浮动

3.自适应布局

左边加个浮动和宽度，右边正常放盒子会发生重叠

右边盒子加个overflow:hidden，右边盒子实现自适应