块级格式化上下文(block formatting context)BFC
最近实在是很郁闷。因为越发的感觉有些东西,有时候我们很少用或者是没有意识的去用的时候,就会忘记,比如BFC,这个概念我很早之前就看过,但是
经常的自己还是会忘记,这就是我目前学习碰到的问题了,没有意识到技术点,用或者不用自己不会考虑很多,所以好记性不如烂笔头,自己还是得总结一下。
思考: 1,BFC是什么?
2,BFC 的特性是什么?
3,BFC如何触发?
让我们看看标准的答案:
1: Block Formatting Contexts 即块级格式化上下文,其中 Formatting Context 是一个决定如何渲染文档的容器
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。
我个人理解是:BFC其实是一个容器或者说区域,在这个区域之中的元素按照它特有的规律进行布局,而浏览器对其渲染也有一套规则。
2: ->属于同一个bfc的两个垂直相邻的box 的margin会重叠。比如上面的盒子margin :20px; 下面的盒子也是margin:20px 但是两个盒子之间的距离本应该是40px才是,可是实际上我们可以看到二者会重叠,且重叠规则是向margin大的一方靠拢。
->计算BFC高度时,浮动元素也参与计算。这个理解呢,我们知道当一个子元素浮动时可能会造成父级元素的高度坍塌,这个时候我们可以在在父级元素触发BFC,让父级元素重新包裹住。代码如下:
<style>
#father{
border: 1px solid red;
width: 400px;
background: blue;
margin:20px;
overflow: hidden;
}
#son{
border: 1px solid blue;
width: 200px;
height: 200px;
background: palegreen;
margin:20px;
float: left;
}
</style>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
->BFC的区域不会与float box重叠。我们知道,当上面的盒子浮动时,会覆盖住下面的盒子,这时候我们只要触发下面盒子的BFC就可以避免这样的情况了。代码如下:
#shang{
border: 1px solid red;
width: 400px;
height: 200px;
background: blue;
margin:20px;
float: left;
}
#xia{
border: 1px solid blue;
width: 200px;
height: 200px;
background: palegreen;
margin:20px;
overflow: hidden;
}
</style>
<body>
<div id="shang">
</div>
<div id="xia">
</div>
</body>
3,那么如何触发BFC呢?
上面我使用了 overflow:hidden;
其实还有这几个方式:
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
因为自己平时碰到的场景不多,实在是萌新,所以也就把常用常见的写上来。本来想把代码放到别的平台,这样阅读起来可以点击查看demo ,奈何现在的平台很多都并不稳定,
考虑时间精力也就作罢,以后一定还是得有自己的博客网站才好。