码迷,mamicode.com
首页 > 其他好文 > 详细

BFC——块级格式化上下文

时间:2016-06-29 20:27:39      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

BFC(块级格式化上下文)

一、BFC是什么?

         从样式上看,具有BFC的容器和普通的容器没有区别。从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法)就是触发了浮动元素的父元素BFC,使到它可以包含浮动元素,从而防止出现高度塌陷的问题。

         简单来说,BFC就是一种属性。这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

二、BFC的触发

  • 浮动元素:除了属性值为none的元素。
  • position:absolute/fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible(hidden/scroll/auto)
  • 根元素

三、BFC的特性

3.1 BFC阻止元素外边距折叠

         两个相邻的元素margin会折叠。而当有BFC产生的时候,外边距不会叠加。

3.2 BFC 可以包含浮动的元素

         这里就是之前提到的包裹性,这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理,使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性,从而可以包含浮动元素,闭合浮动。

         W3C 的原文是“‘Auto‘ heights for block formatting context roots”,也就是 BFC 会根据子元素的情况自动适应高度,即使其子元素中包括浮动元素。

3.3 BFC会阻止元素被浮动元素覆盖

3.3.1块级元素会被它的兄弟元素覆盖,触发了BFC的元素不会被它的兄弟浮动元素覆盖

3.3.2 父元素宽度不足以容纳一行中所有子元素时,非浮动子元素会下沉

四、BFC的运用

4.1 BFC实现自适应两栏布局

         运用3.3.1触发了BFC的元素不会被兄弟浮动元素覆盖,那么我们只需要让右边的div触发BFC,左边的div进行left浮动。就可以实现效果啦~

4.2 BFC清除内部浮动

         就像我们知道的一样,float属性会导致破坏,使父元素的高度“塌陷”。那我们可以利用BFC的3.2特性,是父亲元素产生BFC,这时候父亲元素的高度就会回来啦~

BFC——块级格式化上下文

标签:

原文地址:http://www.cnblogs.com/yyyyg/p/5628101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!