Skip to content
大纲

BFC是什么

一、常见定位方案

普通流:默认,从上而下,行内元素水平排列,行满换行,块级元素渲染成一个新行。

浮动:先按普通流位置出现,然后根据浮动方向偏移。

绝对定位:元素具体位置由绝对定位坐标组成。

二、什么是BFC

BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC 即 Block Formatting Contexts (块级格式化上下文),属于普通流。

可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

三、形成BFC的条件

传送门

  • display: flow-root

一个新的 display 属性的值,它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。

四、BFC的特性

1、内部的Box会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定

3、bfc的区域不会与float的元素区域重叠。

4、计算bfc的高度时,浮动元素也参与计算

5.实例讲解

  1. BFC包含浮动的块
html
<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

测试

  • 简单bfc浮动
  • 对照组
Try to resize this outer float

Normal


  • 实验组flow-root
Try to resize this outer float

display:flow-root


Last updated: