在进入BFC话题前,先来捋一下常见的定位方案,定位方案是控制元素的布局,主要有三种常见的方案:
在普通流中,元素按照其在HTML的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是流定位。也可以说,普通流中元素的位置由该元素在HTML文档中的位置决定。
额外:⚠️
HTML中,元素可以分成块级元素(block-level elements)和行内元素(inline-level elements)。具体的解析会另开一篇博文出来讲解。
下面给出普通流的一个例子:
<body>
<span>first</span>
<a href="javascript:;">second</a>
<div class="demo demo1"></div>
<div class="demo demo2"></div>
</body>
复制代码
html,body{
margin: 0;
padding: 0;
}
.demo{
width: 200px;
height: 200px;
}
.demo1{
background: red;
}
.demo2{
background: blue;
}
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果和印刷排版中的文本环绕相似。如下:
<body>
<div class="container">
<div class="left"></div>
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
</div>
</body>
复制代码
html,body{
margin: 0;
padding: 0;
}
body{
padding: 100px;
}
.container{
border: 1px dotted red;
}
.container .left{
width: 50px;
height: 50px;
background: blue;
float: left;
}
⚠️为什会内容环绕呢,而不是跟浮动元素重合呢?
《CSS权威指南》中指出,浮动的目的,最初只能用于图像,的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。
在绝对定位布局中,元素会整体脱离普通流(浮动布局可以理解成脱离父元素文本流),因此绝对定位不会对其兄弟元素造成影响,而具体的位置由绝对定位的坐标决定。
Formatting context(格式上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
BFC即Block Formatting Content(块级格式上下文),它属于上述定位方案的普通流。具有BFC特性的元素可以看作是**隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的一些特性。**后面介绍。
简单来说,可以把BFC理解成一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部的元素。
下面的方式会创建块格式上下文:
float
不是none
)position
为absolute
或fixed
)display
为inline-block
)display
为table-cell
,html表格单元格默认为该值)display
为table-caption
,html表格标题默认为该值)display
为table
、table-row
、table-row-group
、table-header-group
、table-footer-group
(分别是html table、row、tbody、thead、tfoot的默认属性)或inline-table
)overflow
值不为visible的块元素display
值为flow-root
的元素contain
值为layout、content或strict
的元素display
为flex
或inline-flex
元素的直接子元素)display
为grid
或inline-grip
元素的直接子元素)column-count
或column-width
不为auto
,包括column-count
为1)column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中创建了块格式上下文的元素中的所有内容都会被包含在BFC中。
简单罗列下BFC的特性:
注意⚠️,对于第五点,原本浮动元素是应该脱离文档流的,但是BFC中会计算其高度。
应用了第四点BFC的区域不会与float box重叠的特性。一边浮动,另一边自适应的部分形成BFC,那么两者就不会重叠,避免了文字环绕及类似情形。
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
复制代码
html,body{
margin: 0;
padding: 0;
}
body{
padding: 50px;
}
.container {
width: 100%;
}
.left {
width: 100px;
height: 150px;
background-color: blue;
float: left;
}
.right {
height: 200px;
background-color: red;
overflow: hidden; /*把.right这个自适应的box变成BFC,避免与.left box这个有float属性的元素重叠*/
}
高度塌陷产生的原因:父元素未设置固定的高度,完全由子元素高度撑开;当子元素float之后脱离了文档流,父元素内部就没有支撑,造成了高度的塌陷。
解决这种问题我上之前的博文中有总结,地址请戳CSS清除浮动。这里再简单的说下原理:
也就是用到了BFC的特性五:闭合内部浮动。
<body>
<div class="container">
<div class="left">left</div>
</div>
</body>
复制代码
html,body{
margin: 0;
padding: 0;
}
.container {
width: 100%;
border: 1px solid red;
overflow: hidden; /*形成BFC,使其能闭合浮动 box*/
}
.left {
width: 100px;
height: 150px;
background-color: blue;
float: left;
}
在正常的文档流中,在垂直方向上兄弟box的margin会取交集(取最大的显示),为神马会出现这种情况呢?可以说是一种bug,也可以说是一种规范。我比较倾向于后者。
<body>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
复制代码
.top {
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: 100px;
}
.bottom{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
上面出现的情况是BFC的特性三:属于同一个BFC的两个相邻的box的margin会发生叠加,结果值并集。那么,我们将他们隔离成不同的BFC不久解决问题了嘛。
<body>
<div class='wrap'>
<div class="top">top</div>
</div>
<div class="bottom">bottom</div>
</body>
复制代码
.top {
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: 100px;
}
.bottom{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
.wrap{
overflow: hidden; /*将.top box包含在另外一个BFC中隔离开*/
}
使用好BFC能够是你更好的布局。文中部分内容参考网络内容。
各位大佬轻喷,还请多多指正。放上github地址github.com/reng99求指教就逃:)