CSS你一定要了解的BFC

丛林
85 阅读3分钟

本文章转自微信公众号：成风破浪的前端

什么是BFC？\

  • BFC(Block formatting context) ，直译为"块级格式化上下文" 。

  • 它是网页中一个独立的渲染区域（ 也成为formatting context ）。

  • 这个渲染区域只有块级（Block）元素才能参与。

  • 它规定了内部的块级元素如何布局。

  • BFC渲染区域内部如何布局，与区域外部毫不相干。

  • 外部元素也不会影响BFC渲染区域内的元素。

    简单说：BFC就是页面上的一个隔离的独立渲染区域。区域里面的子元素不会影响到外面的元素。外面的元素也不会影响到区域里面的子元素。\

    图片

    \

    2种渲染区域

    其实，css中有2种渲染区域：块级元素渲染区域 和行级元素渲染区域。

\

图片

\

  • 块级元素渲染区域：所有display属性为 block, list-item, table 的元 素，会生成块级元素渲染区域，块级元素渲染区域内以BFC方式渲染；

图片

  • 行级元素渲染区域：display 属性为 inline, inline -block,inline -table 的元素，会生成 行级元素渲染区域。行级元素渲染区域内以IFC方式渲染；

  • 图片

  • BFC的布局规则

  • 默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元 素独占一行

  • 块元素垂直方向的总距离由边框内大小+margin共同决定。

  • 属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重 叠/合并。但水平方向的margin不会。

  • 左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔 接，不能出现重叠

图片

  • 计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须 算在内。

图片

4种情况会形成BFC渲染区域

  • float的值不是none • 
  • position的值不是static或者relative。
  • display的值是inline-block、table-cell、flex、table-caption或者 inline-flex 

overflow的值不是visible

所以，形成BFC区域可以解决高度坍塌！

  • 为父元素设置overflow:hidden属性。

因为形成BFC区域，所以必须父元素必须包含内部float浮动元 素。其实这里改成display:table，也可以。因为display:table也可以形成 bfc区域。只不过，需要预防其他可能造成的新问题。

  • 设置父元素也浮动。

因为父元素float，也形成了BFC区域，必须包含内部float浮动 的子元素。总结独立渲染区域 ，内部不影响外部， 外部也不能入侵影响内部如何生成BFC区域，4句话：

  1. float的值不是none 
  2. position的值不是static或者relative。 
  3. display的值是 inline-block、table、table-cell、 flex、table-caption或inline-flex 
  4. overflow的值不是visible

### BFC还可以解决 更多问题…

  • 避免垂直方向 margin合并
问题：垂直方向上，两个元素上下margin相遇时，两元素的间的总间距并不等于两个margin的和。
而是等于最大的margin。小的margin会被大的margin吞并。
解决：
Step1: 添加父元素包裹下方元素
Step2:父元素overflow:hidden父元素下第一个子元素前添加空父元素padding代替子元素margin父元素+透明上边框父元素::before{ content:””; display:table }
  • 避免垂直方向 margin溢出
问题：子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top。
而实际上，子元素与父元素之间，依然是没有margin-top的,效果不是想要的。
解决：
1、父元素overflow:hidden
2、父元素下第一个子元素前添加空<table>父元素padding代替子元素margin父元素+透明上边框父元素::before{ content:””; display:table }
  • 左定宽， 右自适应布局

image.png

Step1: 左: float:leftStep2: 右: 右overflow:hidden
avatar
文章
阅读
粉丝