一 什么是 BFC
它是页面中的一块渲染区域，并且有一套渲染规则. 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。
触发BFC的条件
body 根元素；
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display为： inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)
二 BFC的特性及应用
<head>.p {width:200px;height:50px;margin:50px 0;background-color:red;}</head><body><div class="p"></div><div class="p"></div></body>
垂直方向的距离是由margin决定的，同一个BFC下的相邻的两个box，会发生垂直方向margin重叠，我们需要让他们不属于同一个BFC
2 BFC可以包含浮动的元素（清除浮动）
根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部设置BFC的div容器就可以包裹着浮动元素。
3 BFC可以阻止元素被浮动元素覆盖
三 简要介绍IFC
IFC布局规则：
框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑； 在垂直方向上，这些框可能会以不同形式来对齐： 水平的margin、padding、border有效，垂直无效。不能指定宽高;
行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定
扫一扫
358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
