【CSS-TASK15】
请描述 BFC(Block Formatting Context) 及其如何工作
分享人:郭晨阳
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
我们常常说文档流的时候其实分为定位流、浮动流和普通流三种。其中普通流就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域。
一:BFC 是什么
[BFC]是可视化CSS渲染网页的一部分,它是一个区域,块级布局,相互浮动在这个区域发生。
一个BFC块区域包含所有里面的元素,除子元素创建了新的BFC。(因为各个BFC是一个独立的区域,BFC之间相互不影响)
所以:由于html(根元素)是独立的BFC,在里面的浮动,块级布局等才会相互影响,若新创建BFC,则相邻BFC之间的浮动元素,或是其他元素将不会影响。如,相邻两个块级元素的外边距折叠的情况将不会发生。
二:触发条件
【1】根元素,即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
三:BFC的作用
包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度,这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的
不被浮动元素覆盖 浮动元素会无视兄弟元素的存在, 覆盖在兄弟元素的上面, 为该兄弟元素创建BFC 后可以阻止这种情况的出现
四:BFC规则
内部的Box会在垂直方向,一个接一个地放置。 就是我们平常div一行一行块级放置的样式。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。就是元素左margin和包含块左border接触,即使存在浮动也是如此。左浮动就是靠左,右浮动就是靠右。
BFC的区域不会与float box重叠。应用于两列布局。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。上下margin不影响,浮动不覆盖。
计算BFC的高度时,浮动元素也参与计算。如父元素高度塌陷,清除浮动。父元素高度由内部撑开,计算bfc高度,内部浮动的子元素也参加。
1.外边距折叠(Collapsing Margins)
2.让一个没有设置高度的容器包含浮动元素
3.阻止文字环绕
为什么用overflow触发而不用其他的?
因为其他如float,positon等等会影响布局,达不到我们想要的效果
overflow的auto还是visible可以触发bfc?
利用浮动再触发bfc用来干嘛?
语法:
return[()[expression][]];
可选项 expression 参数是要从函数返回的值。如果省略,则该函数不返回值。
用 return 语句来终止一个函数的执行,并返回 expression 的值。如果 expression 被省略,
或在函数内没有 return 语句被执行,则把值 undefined 赋给调用当前函数的表达式。