起航学习网

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;

}

文章出自：http://qh.itpxw.cn/peixun/web/202185837.html

文章标题：理解 CSS 布局和块级格式化上下文

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉