Block Formatting Context(BFC)

Author Avatar
Ninefire 6月 07, 2018
  • 在其它设备中阅读本文章

Box的概念

Box是CSS布局的对象和基本单位,直观来说,即一个页面是由很多个Box组成的。
元素的类型和display属性,决定了这个Box的类型,不同类型的Box,会参与不同的Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。

  • block-level box:
    display属性为blocklist-itemtable的元素,会生成block-level box,并参与Block Formatting Context。
  • inline-level box:
    display属性为inlineinline-blockinline-table的元素,会生成inline-level box,并参与Inline Formatting Context。

Formatting Context的概念

Formatting Context是W3C CSS2.1规范中的一个概念。
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用。
最常见的Formatting Context有:

  • Block Formatting Context(简称BFC)
  • Inline Formatting Context(简称IFC)

BFC的概念

BFC(Block Formatting Context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有block-level box参加,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干。

BFC的布局规则

  • 内部的Box会在垂直方向一个接一个地放置。
  • BFC的区域不会与float box重叠。
  • 内部的Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 就是BFC的高度时,浮动元素也参与计算(清楚浮动 Haslayout)。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此。

BFC的产生

以下情况均会产生BFC:

  • 根元素
  • float属性不为none
  • position属性为absolutefixed
  • overflow不为visible
  • displayinline-blocktable-celltable-captionflexinline-flex

BFC实现两列布局

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>BFC实现两列布局</title>
    <style type="text/css">
        .warp {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid black;
        }

        .warp .left {
            float: left;
            width: 200px;
            height: 600px;
            background: orange;
        }

        .warp .right {
            /*开启right的BFC,使right不与float box2004.html重叠*/
            overflow: hidden;
            height: 600px;
            background: #bfa;
            padding-left: 2em;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="left">left</div>
        <div class="right">
            right right right right right right<br />
            right right right right right right<br />
            right right right right right right<br />
            right right right right right right<br />
            right right right right right right<br />
            right right right right right right<br />
        </div>
    </div>
</body>
</html>

戳我查看最终效果!<<

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/CSS2.1/05.html