也许你已经掌握了HTML、CSS
的基本布局技能,但是有可能还有一些难以琢磨透的专业名词还不是很清楚,比如BFC
。今天我们就来聊聊对BFC
的理解,以便我们在布局的过程中能够更加得心应手。
概念
BFC(Block Formatting Context)
,块级格式化上下文,一个创建了新的BFC
的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。
BFC
是Web
页面中盒模型布局的一种CSS
渲染模式。它的定位体系属于常规文档流。
W3C规范定义:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如
inline-blocks, table-cells
, 和table-captions
),以及overflow
值不为“visiable
”的块级盒子,都会为他们的内容创建新的BFC
(块级格式上下文)。在
BFC
中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin
值所决定的。在一个BFC
中,两个相邻的块级盒子的垂直外边距会产生折叠。在
BFC
中,每一个盒子的左外边缘(margin-left
)会触碰到容器的左边缘(border-left
)(对于从右到左的格式来说,则触碰到右边缘)。
行成要素
W3C中提到:
一些元素,如float
,绝对定位元素,inline-block, table-cell, table-caption
,和overflow
的值不为visible
的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下文。
归纳形成BFC
的几个要点:
float
的值不为none
;position
的值不为static
或者relative
;display
的值为table-cell, table-caption, inline-block, flex
, 或者inline-flex
中的其中一个;overflow
的值不为visible
。
详细可参考:MDN-块格式化上下文
创建一个BFC
创建一个新的BFC
模式,只要满足上面所述要素中的任何一个条件即可,添加相关的CSS
属性。
示例:
<div class="container"> Some Content here </div>
给容器.container
添加诸如:overflow: scroll, overflow: hidden, display: flex, float: left
,或者 display: table
等任何一个属性,就可以形成一个新的BFC
。尽管这些条件都能形成一个BFC
,但是它们各自却有着不一样的表现:
- display: table; —— 在响应式布局中会有问题
- overflow: scroll; —— 可能会出现你不想要的滚动条
- float: left; —— 使元素左浮动,并且其他元素对其环绕
- overflow: hidden; —— 隐藏溢出部分
总的说来,建立BFC
最好的方式也许就是overflow:hidden
了,如下:
.container {
overflow: hidden;
}
特点
在同一个 BFC
中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin
会发生折叠。
所有属于BFC
中的Box
都默认左对齐,并且它们的左边距可以触及到容器container
的左边。最后一个Box
,尽管它是浮动的,但它依然遵循这个原则。
用途
说了这么多规则与概念,那么我们运用BFC
能做些什么呢?
消除外边距合并
根据BFC
布局规则第二条:
Box
垂直方向之间的距离由margin
决定,属于同一个BFC
的两个相邻Box
的margin
会发生重叠。
由此规则体现为:相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为重叠,并且因而所结合成的外边距称为重叠外边距。
产生折叠的必备条件:margin
必须是邻接的!
折叠的结果
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时,折叠结果是两者的相加的和。
示例:
<style>
.wrap {
width:330px;
background: #08c;
overflow: hidden;
}
.item {
width: 300px;
height: 50px;
margin: 15px;
line-height: 50px;
text-align: center;
color: #fff;
background: #6c0;
}
</style>
<div class="wrap">
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
</div>
如图所示:
item
元素垂直方向之间的margin
值合并了,原本应该是30px
,目前只有15px
。
解决方案
建立新的BFC元素包裹起来:
<div class="wrap">
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="new-BFC">
<div class="item">ccc</div>
</div>
</div>
添加CSS
属性:
.new-BFC {
overflow: hidden;
}
这样被新BFC
元素隔离出来的item
就不受外部影响了,离第二个盒子之间的垂直margin
距离达到30px
,如图:
但是个人觉得没必要这么做,其实一般情况下设置单方向的margin
值就好了,比如给item
都设置margin-top:30px;
, 如果觉得第一个元素顶部边距太多可以单独添加.item:first-child {margin-top:15px;}
,如果大家还有更好的见解也可以提出来讨论。
容纳内部浮动元素
根据BFC布局规则第六条:
计算BFC的高度时,浮动元素也参与计算
由BFC
的独立区域特性体现,BFC
内部的元素不会影响到外部元素。
示例:
<style>
.content {
width:360px;
padding: 10px;
background: #08c;
}
.child {
float: left;
width: 150px;
height: 50px;
margin: 0 15px;
line-height: 50px;
text-align: center;
color: #fff;
background: #6c0;
}
</style>
<div class="content">
<div class="child">child 01</div>
<div class="child">child 02</div>
</div>
由于子元素浮动导致的父元素高度塌陷,如图:
解决方案
清除浮动的方法有很多,更多方法可参考:你必须懂得的CSS
清除浮动方法,4种清除浮动方法
这里我们可以根据W3C的规则触发父元素content
形成BFC
,让内部的浮动元素也参与计算,给父元素添加:
.content {
overflow: hidden;
}
如图,父级高度由子元素撑开了:
自适应两栏布局
BFC
布局规则第三条与第四条:
- 每个元素的
margin box
的左边, 与包含块border box
的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此。 BFC
的区域不会与float box
重叠。
了解以上规则后,我们可以利用BFC
来实现自适应两栏布局。
示例代码:
<style>
.wrap {
width:300px;
background: #08c;
}
.side {
float: left;
width: 120px;
height: 200px;
background: #6c0;
}
.main {
height: 300px;
background: #66c;
}
</style>
<div class="wrap">
<div class="side"></div>
<div class="main"></div>
</div>
根据BFC
规则第三条体现为:紫色的main
元素以及绿色的 浮动 元素side
都会紧贴 wrap
的左边 border
(由于浮动元素脱离文档流会盖在紫色盒子上面),如图:
根据BFC
布局规则第四条,我们可以采用给main
添加overflow: hidden;
来触发新的BFC
,这样新的BFC
元素不会与浮动的side
重叠。
.main {
overflow: hidden;
}
因此会根据父级元素的宽度以及side
的宽度,自动变窄,形成侧栏固定,主体自适应宽度布局。如图所示:
利用BFC
阻止文本环绕
我们经常见到的“左图+右文本”的布局方式,根据以上原理我们也可以利用BFC
来解决文字环绕的问题,让文字隔离图片并自适应排版。
如下结构:
<style>
.content {
width:300px;
background: #08c;
}
.img {
float: left;
width: 100px;
height: 80px;
background: #fd0;
}
.info {
background: #f66;
}
</style>
<div class="content">
<div class="img"></div>
<p class="info">一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息一些信息</p>
</div>
如图所示:
有时候我们不想要上面的展示,而是下面的效果:
那么根据上面所了解的知识,我们可以触发p
元素的BFC
来形成新的BFC
独有区域,不与浮动的图片元素重叠,因此给.info
添加能触发BFC
模式的CSS
属性属性即可,这里采用overflow:hidden;
,你也可以试试别的能够触发BFC
的属性:
.info {
overflow: hidden;
background: #f66;
}
总结
根据上面几个例子印证了BFC
布局规则第五条:
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因此我们可以利用这些特性来优化我们的margin、float
元素、自适应布局等布局,希望今后在布局的过程中我们能够写出更加优雅的代码,深入地理解每一块布局结构原理。