怎么理解CSS布局和BFC-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么理解CSS布局和BFC

本篇内容介绍了“怎么理解CSS布局和BFC”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

站在用户的角度思考问题，与客户深入沟通，找到闽清网站设计与闽清网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请、虚拟主机、企业邮箱。业务覆盖闽清地区。

什么是 BFC

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。如果我们有足够多的文本，它会环绕浮动的图像和边框，然后环绕整个区域。

// html      I am a floated element.

I am text inside the outer box.

// css .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; }

怎么理解CSS布局和BFC

如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。

怎么理解CSS布局和BFC

这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。

我们通常有两种方法来解决这个布局问题。一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。

.outer {    overflow: auto;  }

怎么理解CSS布局和BFC

查看演示

overflow 以这种方式工作的原因是，使用 visible 的初值以外的任何值都会创建一个块格式化上下文，而 BFC 的一个特性是它包含浮动。

BFC 是布局中的一个迷你布局

你可以将 BFC 看作是页面内的一个迷你布局。一旦一个元素创建了一个 BFC，它就包含了所有的内容。正如我们所看到的，这包括浮动的元素，它们不再从盒子底部伸出来。BFC 还会导致一些其他有用的行为。

BFC 可以防止 margin 折叠

了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。

这个 div 包含两个标签 p。外部 div 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。

// html      I am paragraph one and I have a margin top and bottom of 20px;
    I am paragraph one and I have a margin top and bottom of 20px;

// css .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 元素的 margin 和外部 div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。我们在 p 的上方和下方看不到任何灰色。

怎么理解CSS布局和BFC

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：

鸿蒙官方战略合作共建——HarmonyOS技术社区
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。

.outer {    background-color: #ccc;    margin: 0 0 40px 0;    overflow: auto;  }

怎么理解CSS布局和BFC

查看演示

再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。

BFC 可以阻止元素被浮动元素覆盖

你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。在下面的例子中，有如下 html 结构：

   I am a floated element.

I am text

带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。

怎么理解CSS布局和BFC

我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。

.text {    overflow: auto;  }

怎么理解CSS布局和BFC

这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。

查看演示

在多列布局中使用 BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中***一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的***一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

例如：

      column 1

column 2

column 3

新闻中心

其他资讯