前言
CSS 一直不是我的强项, 这也是我第一篇 css 相关的文章, 虽然我平时 css 写的比较少, 但其中比较重要的基础的东西还是需要理解的, 比如 BFC 流浮动等; 还是有必要 mark 下的
什么是 BFC?
BFC(Block Formatting Context) 直译过来就是块格式化上下文, 可以看做是一种 web 页面中盒模型布局的 CSS 渲染模式, 定位体系属于常规文档流, 设置了某些样式后的元素, 就可以创建一个新的 BFC
浮动, 绝对定位元素, inline-blocks,table-cells,table-captions, 和 overflow 的值不为 visible 的元素,(除了这个值已经被传到了视口的时候) 将创建一个新的块级格式化上下文
当一个 html 盒子元素, 满足以上任一条件时, 就可以将其看作一个 BFC 比如: 元素的 float 属性不为 noneposition 不为 staticoverflow 不为 visible 等等, 只要满足其中一个条件, 就形成了一个 BFC, 当然用得最多的就是设置 overflow 为 hidden 来创造一个 BFC
BFC 的特性和应用
了解了 BFC 的基本概念后, 再来看看它的一些特性和常见的应用场景
1. 盒子边对齐
如上图, 一个 BFC 盒子中的所有元素都是默认左对齐的 (左至右), 无论其大小宽高, 是否浮动, 都是向左边框对齐
利用这个特性可以解决文字包围图片的问题, 比如一个 img 和一个 p 标签从左到右并排放在一起, 可能就会出现 p 的文字过多跑到 img 的下面去, 形成一个文字包围图片的情况, 而我们想要的是图片和文字分开, 这时候只要给 p 标签设置一个 overflow:hidden,p 标签的文字就会乖乖地在图片右边框那里对齐了
2. 外边距重叠
在一个 BFC 盒子中, 会导致元素之间的外边距重叠, 参考下面的一个例子
Box 是一个 BFC 盒子, 它内部的 Sibing 元素设置了样式 margin: 10px 0 按道理, 两个子元素之间的垂直距离应该是 20px, 但实际上是 10px, 这就是发生了 margin 重叠, 它会取 margin 中的最大的一个值而不会叠加解决这种情况的方法也简单, 只要再创造一个 BFC, 把第二个元素放到第二个 BFC 中, BFC 之间就不会发生这种外边距重叠了
3. 包含浮动元素 (清除浮动)
一般情况下: 假设一个 div, 里面包含了一个浮动的子元素, 那么这个子元素将脱离页面的常规流; 并且父元素 div 不会被撑开, 没有 height 高度
一般情况, 父元素没有高度
BFC 的情况下: 给父元素 div 设置一个 overflow:hidden 使其成为 BFC 盒子, 这个时候父元素 div 就有高度了, 它的子元素也回到了常规流之中
BFC 还可以用来清除浮动, 在示例 html 上写三个三个 float: left 的元素, 那么自然三个元素为排成一排接着我们给每个浮动元素加一个 div 父元素, 样式写上一条 overflow:hidden, 会发现三个元素排成了一列, 浮动被清除了~~
BFC 的情况, 父元素被撑开
4. 多列布局
我们平时很常见的多列布局, 要求自适应等, 也可以利用 BFC 来实现最经典的用法就是, 左边一个 div 左浮动, 然后右边一个 div 设置为 BFC, 这样左边元素宽度变化时, 右边元素可以自适应的变化, 具体效果如下图
左边元素宽度变化, 右边元素自适应
同理, 也可以实现三列布局, 左元素左浮动, 右元素右浮动, 中间元素设置为 overflow:hidden 也可以实现自适应这种布局可谓是一种万能布局了, 可以处理很多情景布局
结语
说了这么多, 其实 BFC 也算是 css 的基础内容了, 早在 flex 流行之前, 它就可以做到很多布局上的效果, 虽说我平时不写 css 但是也要对其基础重要内容重视起来, 原理也要理解
来源: http://www.jianshu.com/p/ece1634bc9f3