这篇文章是借鉴大佬的，因为今天看了面试题，看到了BFC，看了这篇博客还是不太理解，所以借鉴过来，等基础更好一些了再来看
我对BFC的理解 最初这篇文章打算回答寒冬大神的第一问，谈谈CSS布局。本来呢我以为布局主要涉及float跟display相关属性，以及他们的包含框、静态位置等等。后来看了大神的一片面试文章，嗯？这里怎么还有个BFC，这是神马东东。待我搜索一下，萨萨萨，不看不知道，越看越糊涂，这到底是个神马东东。。。经过一个周时间的查阅资料和自我思考，在此总结一下我对BFC的认识，愿与各位道友分享，欢迎拍砖！ 对CSS有了解的道友们肯定都知道盒式模型这个概念，对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。那首先我们就来看一下FC的概念。 Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 BFC的生成 既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute或fixed 看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC BFC的约束规则 浏览器对于BFC这块区域的约束规则如下：生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。 有道友对它做了分解，我们直接拿来：内部的Box会在垂直方向上一个接一个的放置垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）BFC的区域不会与float的元素区域重叠计算BFC的高度时，浮动子元素也参与计算BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然 看到以上的几条约束，让我想起学习css时的几条规则Block元素会扩展到与父元素同宽，所以block元素会垂直排列垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)浮动元素会尽量接近往左上方（或右上方）为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素… 哈哈，一股恍然大悟的感觉有木有，原来这些规则的背后都有更深层的概念，冥冥之中自有定数。。。 BFC在布局中的应用 上面说了那么多，那BFC究竟有何用处，毕竟再好的东西也要为我所用才行。 防止margin重叠： 同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode。下面这个demo来自寒冬大神的博客。 <!doctype HTML>
margin水平重叠 可以看到水平方向的margin发生了重叠。 要阻止margin重叠，只要将两个元素别放在一个BFC中即可（可以用上文提到的方式让相邻元素其中一个生成BFC）。阻止两个相邻元素的margin重叠看起来没有什么意义，主要用于嵌套元素。- 1
- 2
- 3
- 1
- 2
- 3
.left{
background:pink;
float: left;
width:180px;
}
.right{
background:lightblue;
width:180px;
float:right;
}
.center{
background:lightyellow;
overflow:hidden;
height:116px;
}
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
