浅谈BFC

---

theme: scrolls-light

highlight: a11y-dark

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

前言

• 大家好，我是vike。今天和大家一起来聊聊BFC，希望对你有帮助！

防止高度坍塌的四种方案

+ 给父元素设置overflow 这样就能包裹住浮动子元素 - 缺点 有些超出的父元素的要显示 显示不出来 ```html

body { margin: 0; padding: 0; } .parent { background-color: aquamarine; overflow: hidden; } .children1 { width: 50px; height: 100px; background-color: blanchedalmond; float: left; } .children2 { width: 50px; height: 150px; background-color: black; float: right; }

```

+ 给父元素最后增加一个子元素设置样式为clear:both - 缺点 无故增加空元素 影响查找

• 给父元素也设置浮动 浮动包裹住子元素

  • 和overflow元素一样 子元素不能超出父元素
  • 父元素设置浮动后 后续元素设置clear:both

• 给父元素末尾伪元素设置clear:both

  • 最优解法 既不会增加元素 也不会产生浮动问题 after设置 防止高度影响加height:0

• 解决效果

BFC

+ 块级格式化上下文 + 独立渲染区域 ：内部不影响外部 外部也不能侵入内部 + 块级元素渲染区域：所有display属性为block,list-item,table的元素会生成块级元素渲染区域 + 块级元素渲染区域以BFC方式渲染

BFC布局规则

• 默认 内部的块元素会在垂直方向，一个接一个放置，每个元素独占一行。
• 块元素垂直方向的总距离由边框内大小以及margin决定
• 属于同一个BFC的相邻块元素在垂直方向上会发生重叠，水平方向的不会
• 计算父元素BFC渲染区域高度时 内部浮动元素的高度必须算在内

怎样形成BFC渲染区域

• float的值不是none
• position的值不是static和relative
• display的值是inline-block,table-cell,flex,table-caption或者inline-flex
• overflow的值不是visible

为什么要形成BFC区域

• 解决高度坍塌问题
• 父元素设置overflow:hidden 就形成了BFC区域 所以浮动子元素被包裹在父元素里

解决外边距重叠问题

+ 在底下元素外包裹一个元素设置overflow：hidden 形成BFC区域 隔开两个元素 + 将底下元素的：before伪元素 设置display：table 形成BFC区域

垂直方向margin溢出

• 设置父元素overflow:hidden
  • 原理： 设置父元素为BFC区域
• 为父元素设置边框 颜色设置为transparent(透明)
  • 原理： 边框本身可以阻止margin溢出
  • 缺点： 边框会增大父元素的实际大小
• 用父元素的padding-top代替子元素的margin-top
  • 原理： padding本身可以阻止margin溢出
  • 缺点： 使用padding会影响父元素的大小，可以使用box-sizing:border-box
• 在父元素内第一个子元素前添加一个空的table
  • 原理： table相当于display：table 形成了BFC区域
  • 优点： 空table没有大小，不占用父元素内容
  • 缺点： 增加了一个无关的元素
• 在父元素伪类before上加 display:table
  • 优点： 不增加新元素 不影响高度

BFC实战

• 上面一起看了这么多BFC的特性，一起来做一道题练习一下吧
• 实现一个左边定宽 右边自适应的页面
• 效果

``` html

```

IFC

+ 行级元素渲染区域： 所有display属性为inline,inline-block,inline-table的元素会生成行级元素渲染区域 + 行级元素渲染区域以IFC方式渲染