CSS之BFC

BFC或许很多人都没听过这个名词，不过我们在写样式的时候一直在使用BFC的概念。BFC的解释是：块格式化上下文（Block Formatting Context）。简单说就是一个块级的盒子。

BFC有一些规则

内部的Box会在垂直方向上一个接一个的放置。

垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

bfc的区域不会与float的元素区域重叠。

计算bfc的高度时，浮动元素也参与计算。

bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

我们经常碰到一个问题，就是一个div里面的第一个元素写了margin-top，父元素跟着往下移动了，子元素还是贴着父元素的顶部，这是因为一个盒子不是BFC的情况下，上边距会和其内部文档流中的第一个子元素的上边距重叠，我们一般的做法是加上overfl:hidden，这其实是做了一个BFC。

我们都知道浮动会造成高度塌陷，我们也有很多方法清除浮动，但仔细想想，清除浮动的方法，也都是制造一个BFC，防止浮动造成的高度塌陷问题。

我们写一个多列布局的时候，宽度设置的是33.3333%，我们都以为会在一排，但是结果往往是最后一个被顶到了下一行，因为浏览器可能四舍五入了单位。如果你用的是inline-block，你可以换成float，你会发现他们都排在了一列。

还有一个块里面浮动一张图片，然后文字很多的时候会环绕这张图片，如果我们希望文字在右，图片在左，这时候给这些文字包含在一个BFC里面就能实现。

BFC会创建一个盒子，里面的元素不会超出这个盒子。常用的BFC方法有overflow不为visible、float不为none、position不为static和relative、display、flex布局等等。

BEC的我们可能不知道，但是我们一直在用，我讲的也不是很清楚，这边只是希望提出这个概念，然后可以去查资料更好的理解。

（完）

Coding 个人笔记