BFC (BlockFormattingContext)
2015-09-05 15:15:04 0 举报AI智能生成
CSS BFC
作者其他创作
大纲/内容
一、BFC的定义
Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box，
会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
Formatting context
指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
BFC定义
块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
二、BFC的生成
1、根元素
2、float不为none
3、position为fixed或absolute
4、overflow不为visible
5、display为inline-block、inline-flex、flex、table-cell、table-caption
三、BFC的布局规则
1、内部的Box会在垂直方向上一个接一个的放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算。
四、BFC解决问题
1、自适应布局
2、清除浮动
3、防止垂直margin重叠
4、...
0 条评论
下一页
