内容简介:原文链接:CSS布局中有一些概念是你一旦理解它那么就会极大的提升你的在这篇文章中,我将通过一些你可能熟悉的例子解释什么是
原文链接: https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
CSS布局中有一些概念是你一旦理解它那么就会极大的提升你的 CSS
技能的。这篇文章是关于块级格式化上下文的 BFC
。也许你从未听说过这个术语,但是如果你曾经用 CSS
做过布局,那么你也许知道它是什么。理解什么是 BFC
,它为什么会起作用以及如何创建一个有用的 BFC
可以帮助你理解 CSS
布局是怎样工作的。
在这篇文章中,我将通过一些你可能熟悉的例子解释什么是 BFC
。我将向你展示一个新的概念,当你明白什么是 BFC
以及你为什么需要它的时候,它才真正有意义。
什么是 BFC?
最容易明白一个 BFC
表现的是一个浮动的例子。在下面的例子中有一个盒模型,其中包含一张左浮动的图和一些文字。如果我们有大量的文字,它环绕在浮动的图像上,则边框会围绕着整个区域。
<div class="outer"> <div class="float">I am a floated element.</div> I am text inside the outer box. </div>
.outer { border: 5px dotted rgb(214,129,137); border-radius: 5px; width: 450px; padding: 10px; margin-bottom: 40px; } .float { padding: 10px; border: 5px solid rgba(214,129,137,.4); border-radius: 5px; background-color: rgba(233,78,119,.4); color: #fff; float: left; width: 200px; margin: 0 20px 0 0; }
图1:文本环绕着浮动元素
如果删除了一些文本,那么文本就不足以环绕图像,并且因为图片浮动脱离了文档流,边框就会在图片下面并且上升到文本的高度。
图2:没有足够的文本,边框就不能到达浮动元素所期望的高度
这是因为当我们在浮动一个元素时,文本所在的盒模型仍然是固定的高度,而因浮动元素而缩短的空间是文本的行框。这就是为什么背景和边框会出现在浮动元素的后面。
这里有两种我们通常修复这种问题的方式。一种是使用清除浮动 clearfix hack
[1],它是通过在文本和图片下面插入一个元素并且设置清除两侧浮动来起作用的。另一种方式是使用 overflow
属性,使用其他的值来代替默认的 visible
。
.outer { overflow: auto; }
图3:使用 overflow:auto 使盒模型中包含浮动
overflow
属性起作用的原因是使用任何一个其他值来代替初始值 visible
,从而创建一个 BFC
。即 BFC
的一个特点就是它包含浮动。
BFC 布局是一个迷你布局
你可以认为 BFC
在网页中是一个迷你布局。一旦一个元素创建的 BFC
,所有东西都包含在里面了。正如我们所看到的,它包含浮动元素使其不再超出盒子底部。同时 BFC
也产生了一些其他有用的行为。
BFC 防止外边距塌陷
理解外边距塌陷是另一个被低估的 CSS
技能。在下一个例子中,有一个灰色背景的 div
。这个 div
中有两个段落。外层 div
有 40px
的下边距;每一个段落也分别有 20px
的上下边距。
.outer { background-color: #ccc; margin: 0 0 40px 0; } p { padding: 0; margin: 20px 0 20px 0; background-color: rgb(233,78,119); color: #fff; }
由于 p
元素的外边距和外层 div
的外边距之间没有任何东西而导致它们折叠,使 p
段落最后会与盒子的顶部和底部平齐。所以在 p
段落的上面和下面我们没有看到任何灰色。
图4:外边距塌陷导致在盒子的顶部和底部看不到任何灰色
如果我们对盒模型应用 BFC
,那么它将包括段落和边距并使之不会塌陷,所以我们将在边距的后面看到灰色的背景。
.outer { background-color: #ccc; margin: 0 0 40px 0; overflow: auto; }
图5:使用BFC外边距将不会塌陷
BFC
再一次使元素包含在其中,阻止其外边距塌陷或超出盒模型。
BFC 阻止内容环绕浮动元素。
你也会熟悉 BFC
这种行为,就是它如何在使用浮动的多列布局中工作的。如果一个项目创建了 BFC
,那么它将不会环绕任何浮动元素,比如在下面的示例中有这样的标记:
<div class="outer"> <div class="float">I am a floated element.</div> <div class="text">I am text</div> </div>
带有 float
类的元素开始浮动,然后 div
中的文本会环绕在浮动元素周围。
图6:文本环绕浮动元素
那么可以使用通过对文本使用 BFC
来阻止其环绕行为。
.text { overflow: auto; }
图7:div 包含的文本使用了 BFC 使之停止环绕
这是我们创建多列浮动布局常用的方式。浮动一个元素同时也为另一个元素创建了 BFC
,所以当右边的元素比左边高时,创建的列也不再尝试环绕对方。
还有什么方式可以创建 BFC?
除了使用 overflow
属性以外,其他一些 CSS
属性也可以创建 BFC
。正如我们看到的,浮动一个元素也创建了 BFC
,所以浮动项目将包含里面的任何元素。
其他方式还有使用 position: absolute
, position: fixed
,使用 display: inline-block
, display: table-cell
及 display: table-caption
,其中 table-cell
以及 table-captions
是 HTML
元素的默认属性,所以如果有一个 table
数据,那么它的每个格子都将创建 BFC
。 column-span: all
多被使用在多列布局中。 Flex
和 Grid
项目也会创建类似的 BFC
,它们分别被描述为 Flex
格式化上下文和 Grid
格式化上下文,这分别反映了不同的布局类型。 BFC
表示块级布局, FFC
代表 Flex
布局。在实际项目中结果是一样的,都是包含浮动并且外边距不会发生塌陷。
创建 BFC 新方式
使用 overflow
属性或其他方式创建 BFC
有两个问题。第一,这些方法对于它们真正的用途会产生副作用。使用 overflow
属性创建一个 BFC
并且包含浮动,但是在某些情况下你可能会发现得到一个了不必要的滚动条,或者阴影被剪掉了。这是由于 overflow
属性本质上是告诉浏览器在溢出的情况下应该怎样做—产生滚动条或者剪掉元素。浏览器实际上做了你让它做的工作!
即使在没有任何副作用的情况下,使用 overflow
属性也可能会让另一个开发人员感到困惑。为什么 overflow
属性设置为自动或滚动?开发者最初的目的是什么?他们希望在这个组件上使用滚动条吗?怎样创建一个 BFC
是行之有效的?应该是没有造成其他行为而创造出迷你的布局, 或者保证是在安全范围内的,它将不会引发任何意想不到的问题,并且开发人员的意图也很清晰。 CSS
工作组认为有一个很方便的新的 display
属性: flow-root
。
你可以在任何情况下使用 display: flow-root
,它将会创建一个新的有用的 BFC
,它包含浮动,阻止外边距塌陷,并且阻止元素环绕浮动。
你可以在下面的 CodePen 中看到上述所有的这些, 如果你的浏览器支持 display: flow-root
的话,如目前流行的火狐或谷歌浏览器。
图8:支持 display: flow-root 属性的浏览器
支持这个属性的浏览器是有限的,但如果你认为这将是方便的,你可以去支持它。然而,即使目前你不能够在你的代码很流利的使用 flow-root
功能,但你现在明白了 BFC
是什么,以及当你使用 overflow
属性或其它方法包含浮动的时候你明白了你在做什么。了解这样一个事实:比如 BFC
将阻止元素环绕浮动,这在不支持的浏览器中想创建 Flex
或 Grid
布局的时候都是非常有用的。
你已经了解了一些关于浏览器如何布置 Web
页面的基本原理,这看起来似乎无关紧要,但却可以加快创建和调试 CSS
布局的时间。
扩展阅读
[1] https://css-tricks.com/snippets/css/clear-fix/
更多文章请关注 全栈探索 微信公众号,扫描下面二维码关注:
以上所述就是小编给大家介绍的《【译】理解 CSS 布局和块级格式化上下文》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 学习BFC格式化上下文笔记
- CSS BFC特性(块级格式化上下文)
- 理解CSS布局和块格式化上下文
- BFC(块级格式化上下文)的特点和应用场景
- DDD:识别限界上下文以及理解上下文映射
- DDD:识别限界上下文以及理解上下文映射
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。