了解CSS布局和BFC，真正提高你的CSS布局

时间：2023-03-12 19:45:02 科技观察

CSS布局中有一些概念，一旦你理解了它们，就可以真正提高你的CSS布局技能。这篇文章是关于块格式化上下文(BFC)的。您可能从未听说过这个术语，但是如果您曾经使用CSS进行过布局，您可能知道它是什么，并且了解BFC是什么、它的工作原理以及如何创建BFC来帮助你了解CSS中的布局是如何工作的。在本文中，我将通过一个熟悉的示例来解释什么是BFC。然后声明一个新的显示值，只有当您了解什么是BFC以及您为什么需要它时，这才有意义。什么是BFC在网页的CSS渲染中，块级格式化上下文（BlockFromattingContext）是根据块级框来布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素、非块级框（如inline-blocks、table-cells、table-captions）的块级容器，以及溢出值的块级框不是“可见的”，将为它们的内容创建一个新的BFC（块格式上下文）。BFC是一个独立的布局环境，元素的布局不受外界影响，在一个BFC中，blockboxes和lineboxes（lineboxes由一行中的所有inline元素组成）会垂直沿着它的Border对齐父元素的。通过一个简单的float示例，块格式化上下文(BFC)的行为很容易理解。在下面的示例中，我有一个带有图像的框和一些浮动在左侧的文本。如果我们有足够的文本，它会环绕浮动图像和边框，然后是整个区域。//htmlIamafloatedelement.

Iamtextinsidetheouterbox.

//css.outer{border:5pxdottedrgb(214,129,137);border-radius:5px;width:450px;padding:10px;margin-bottom:40px;}.float{padding:10px;border:5pxsolidrgba(214,129,137,.4);border-radius:5px;background-color:rgba(233,78,119,.4);color:#fff;float:left;width:200px;margin:020px00;}如果我删除一些文本，没有足够的内容来包围图像，并且边框会上升，因为浮动从文档流中取出，在图像下方，直到文本的高度。这是因为当我们浮动一个元素时，文本所在框的宽度保持不变，是文本的行框被缩短以为浮动元素腾出空间。这就是背景和边框出现在浮动后面的原因。我们通常有两种方法来解决这个布局问题。一种方法是使用clearfixhack，它所做的是在文本和图像下方插入一个元素并将其设置为clear:both。另一种方法是将overflow属性与默认可见以外的值一起使用。.outer{overflow:auto;}参见演示overflow以这种方式工作的原因是使用除visible初始值以外的任何值都会创建块格式化上下文，而BFC的一个特性是它包含浮点数。BFC是布局中的迷你布局您可以将BFC视为页面中的迷你布局。一旦为元素创建了BFC，它就会包含所有内容。正如我们所见，这包括浮动元素，它们不再从盒子底部突出。BFC还会导致其他一些有用的行为。BFC防止边距折叠了解边距折叠是另一个被低估的CSS技能。在下一个示例中，假设一个div具有灰色背景色。这个div包含两个标签p。外部div元素的底部边距为40px，标签p的顶部和底部边距为20px。//html

IamparagraphoneandIhaveamargintopandbottomof20px;

//css.outer{background-color:#ccc;margin:0040px0;}p{padding:0;margin:20px020px0;background-color:rgb(233,78,119);color:#fff;}因为p元素的margin和外层div上的margin之间没有任何东西，所以两者会塌陷,因此p最终与div的顶部和底部齐平。我们在p上方和下方看不到任何灰色。在CSS中，两个相邻框（可能是兄弟或祖先）的边距可以合并为一个边距。这种组合边距的方式称为折叠，因此组合边距称为折叠边距。折叠结果按照以下规则计算：当相邻的两个边距均为正时，折叠结果取两者中较大的那个值。当相邻两个边距均为负值时，折叠结果为两个绝对值中较大的值。当两个边距分别为正负时，折叠结果为两者之和。产生褶皱的必要条件：边距必须是连续的！如果我们将盒子设为BFC，它现在包含标签p和它们的边距，这样它们就不会折叠，我们可以在边距背景后面看到容器的灰色。.outer{background-color:#ccc;margin:0040px0;overflow:auto;}查看演示同样，BFC的工作是将东西放在盒子里，防止它们跑出盒子。BFC防止元素被浮动元素覆盖您会熟悉BFC的这种行为，因为任何使用浮动的列类型布局都是这样工作的。如果一个项目创建了一个BFC，那么该项目将不会包装任何浮动元素。在下面的示例中，有以下html结构：Iamafloatedelement.