一 BFC概念:
BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。(它的定位体系属于常规文档流。怎么理解这句话);
二 如何创建一个BFC:
1 float的值不为none;
2 position的值不为static或者relative;
3 display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个;
4 overflow的值不为visible;
三 BFC的特性:
1 在一个块级格式化上下文里,盒子从包含块的顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。
两个相邻的块级盒子的垂直外边距会发生叠加。
简言之 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
2 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3 在块级格式化上下文中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘),
即使存在浮动也是如此,除非这个盒子创建一个新的块级格式化上下文。
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4 BFC的区域不会与float box叠加。
5 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
6 计算BFC的高度时,浮动元素也参与计算。
四 在实际的应用中如何利用BFC的上述特性
1 解决margin叠加问题 三P每个p之间的距离为50px,发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px,我们可以新建一个BFC,
怎么建呢?可以给p元素添 加一个父元素,让它触发BFC。
2 用于布局
从图中我们会发现上面BFC的第三个特性,就是元素的左外边距会触碰到包含块容器的做外边框,就算存在浮动也会如此。那么我们如何解决这个问题呢?
看上面BFC第四个特性,就是BFC不会与浮动盒子叠加,
那么我们是不是可以创建一个新的BFC来解决这个问题呢?来看看:发现我们用overflow:hidden触发main元素的BFC之后,效果立马出现了,一个两栏布局就这么妥妥的搞掂…
3 用于清除浮动,计算BFC高度.