BFC学习心得

BFC(Block Formatting Context)块级格式化上下文

一、特点

       1、BFC内部的Box会在垂直方向，一个接一个的放置。

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

        3、BFC的区域不会与float box发生重叠.

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

        5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

        6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

二、bfc遇到的一些现象

        1、根元素html默认开启bfc。

 *      2、解决父子元素外边距重叠。（为父元素开启bfc）

 *      3、利用bfc使页面自适应（利用bfc容器和其他bfc容器不重叠实现两栏和双飞翼布局-一侧固定宽度设置浮动一侧开启bfc）

 *      4、解决高度塌陷（bfc会把浮动元素的高度也计算在内）

        5、子元素的margin-box和父元素的border-box紧挨着所有父子元素会贴在一起

        6、bfc元素之间互不影响

三、开启bfc的方法

        1、html默认开启

        2、脱离文档流开启float，position不是static和relative

        3、overflow不是visible

        4、display：inline-block、table-caption、table-cell、flex、inline-flex。

注：在calc（）函数不兼容时可以结合box-sizing设置一栏固定的两栏布局，设置下侧div为box-sizing：border-box，然后设置padding-top为上方固定栏的高度，就可自适应页面。