深入理解CSS布局和BFC

个人专栏ES6已上线，深入ES6，通过案例学习掌握ES6新特性的一些使用技巧和原理，持续更新，←点击订阅。喜欢再读一遍，养成习惯。本文已收录到GitHubhttps://github.com/qq44924588...更多往期好评文章已归类，我的文档和教程资料也整理了很多。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。为了保证更好的可读性，本文采用意译而非直译。CSSLayout中有一些概念，一旦你理解了它们，就可以真正提高你的CSS布局能力。这篇文章是关于块格式化上下文(BFC)的。您可能从未听说过这个术语，但是如果您曾经使用CSS进行过布局，您可能知道它是什么，并且了解BFC是什么、它的工作原理以及如何创建BFC来帮助你了解CSS中的布局是如何工作的。在本文中，我将通过一个熟悉的示例来解释什么是BFC。然后声明一个新的显示值，只有当您了解什么是BFC以及您为什么需要它时，这才有意义。想阅读更多优质文章，请戳GitHub博客，一年百篇优质文章等你来！什么是BFC在网页的CSS渲染中，块级格式化上下文（BlockFromattingContext）是根据块级框来布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素、非块级框（如inline-blocks、table-cells、table-captions）的块级容器，以及溢出值的块级框不是“可见的”，将为它们的内容创建一个新的BFC（块格式上下文）。BFC是一个独立的布局环境，元素的布局不受外界影响，在一个BFC中，blockboxes和lineboxes（lineboxes由一行中的所有inline元素组成）会垂直沿着它的Border对齐父元素的。通过一个简单的float示例，块格式化上下文(BFC)的行为很容易理解。在下面的示例中，我有一个带有图像的框和一些浮动在左侧的文本。如果我们有足够的文本，它会环绕浮动图像和边框，然后是整个区域。//html我是浮动元素。