New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS #6

Open

moyahuang opened this issue Apr 4, 2020 · 0 comments

Owner

moyahuang commented Apr 4, 2020

对BFC/IFC的理解

看了很多篇博客，也并没有特别懂这个概念。
在我看来FC(formatting context)就是一个布局环境，它包含其所有子元素（包括浮动元素），这个布局环境对内部元素有自己的一组规则。
BFC规则中最重要的两条：

相邻块级元素会发生margin折叠
上下文会包含浮动，且计算高度时会包括浮动元素

注意，并不是块级元素都有BFC，生成BFC需要满足以下任一条件：

浮动元素
定位元素（position为fixed/absolute）
display为table-/inline-block/flex/grid...
display:flow-root(模拟根元素html，mdn推荐，没有后遗症）
overflow不为visible（常用hidden）

IFC（行级格式化上下文）的规则：

内部元素在水平方向依次放置
高度由最高的盒子决定
一行不够放置会自动切换到下一行

参考资料：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
dwqs/blog#22

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment