深入理解css之BFC

 约 4 分钟

BFC的定义

BFC的全称是block formatting context(块状格式化上下文),当BFC起作用的时候,其元素内部无论怎么翻江倒海都不会影响到外部元素,同样,外部元素的变化也不会影响到BFC内部元素,这就跟结界一样,你可以理解为有一个很强的护盾在包裹着BFC元素,这也是为什么BFC元素不会发生margin重叠的原因。

引起BFC的条件

BFC起作用不需要特别多的条件,满足以下情况都会引起BFC:

  • html根元素
  • float不为none的元素
  • overflow为auto、hidden或scroll的元素
  • position不为relative或none的元素
  • display为inline-block的元素
  • table-cell、table-row或者table-caption元素

在清除浮动的时候,只要元素满足以上这些情况,就不需要再加clear属性。

BFC与自适应布局

在之前的文章中,我们有说到过float实现的文字环绕效果,这时候如果给文字加上overflow:hidden就可以实现两栏自适应布局。这样实现的好处是文字的宽度是自适应的,无论图片是多大或多小,排版都不会乱。代码和效果如下:

自适应


.fl {
    float: left;
    width: 100px;
    margin-right: 10px;
}
.content {
    overflow: hidden;
}

<div>
    <img src="./card.jpg" alt="" class="fl">
    <div class="content">
        这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,
        这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示,这里是文本展示
    </div>
</div>

图片和文字之间如果需要间距,可以在图片中设置margin-right的值或者透明border,也可以在内容区设置透明border,但是不可以直接在内容区设置margin-left,如果是设置了margin-left,其间距必须是图片的宽度加上你想设置的间距大小,这样的间距就会对图片的大小产生依赖。

与BFC有关的属性说明

由于引起BFC的属性都有一些古怪的特性,并不是所有的情况都适合实现自适应布局,下面我们来一一说明下:

  • float属性,设置了float之后,元素本身也会BFC化,由于具有破坏性和包裹性,也就失去了宽度自适应的特性,所以float并不适合自适应布局。
  • position属性,position会破坏文档流,与非定位元素很难结合起来用,因此也不适合自适应布局。
  • overflow:hidden,这个属性要比float和position好很多,设置了overflow:hidden的元素,整体上跟普通元素差不多,也保留着普通元素的宽度自适应性,但是有一个缺点,就是内容溢出会被裁剪。在平时的开发中,这种场景不是很常见,因此overflow: hidden可以作为常用的BFC布局。
  • display:inline-block,由于inline-block会让元素尺寸包裹,因此也不适用于BFC布局。
  • display:table-cell,table-cell会让元素表现得跟单元格一样,其有两个特性,一个是父元素宽度足够时,展示的是设置的宽度;第二个是,但元素宽度超出父元素时,展示的是父元素的宽度。因此,table-cell也可用于BFC布局,其原理就是设置一个足够多的宽度值,例如3000px,这样就可以充分利用浏览器的剩余空间,也不会产生滚动条,内容也是自适应的。
  • display:table-row,其对width无感,无法自适应剩余浏览器空间。
  • display:table-caption,没有任何用处。

总结

  • BFC的定义,BFC就如同结界一样,完全封闭对外无任何影响。
  • 引起BFC的各种属性
  • BFC与自适应布局
  • 自适应布局与BFC属性说明
阅读 1.2k

推荐阅读

2623 人关注
174 篇文章
专栏主页
目录