BFC

79 阅读1分钟

Box是Css布局的对象和基本单位,直观地说,就是一个页面是由很多个Box组成的。元素的类型和display属性决定了Box的类型 Formatting context 是W3C CSS2.1规范中的一个概念。他是页面中的一块渲染区域,并且有一套渲染规则,他决定了其子元素将如何定位,以及和其他元素的关系

BFC直译为"块级格式化上下文"

哪些元素会生成BFC?{ 1 根元素 2 float属性不为none 3 position为absolute或fixed 4 display为inline-block,table-cell,table-caption,flex,inline-flex 5 overflow不为visible }

BFC布局规则: 每个元素margin box 的左边,与包含块border box的左边相接触
BFC的区域不会与float box重叠 计算BFC高度时,浮动元素也参与计算

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,