CSS--BFC(块级格式化上下文)

来源：互联网发布：守望先锋游戏数据查询编辑：程序博客网时间：2024/06/08 13:24

BFC是什么？Block formatting contexts

参看w3.org上说的

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme

大概的意思是块级元素是那种源文档被格式化为可视块了的元素，然后使这个元素变成块级元素的display属性取值如下： ‘block’, ‘list-item’, 和 ‘table’。

块级盒block-level box是这种参与了块级排版上下文的一种盒子，每个块级元素都生成了一个包含后代盒子和生成的内容的主要块级盒，并且这个盒子参与了任何定位的计算
这里写图片描述

BFC的一般理解：

BFC是一个独立的布局环境，在这个环境里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（可以利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。），在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的触发条件

满足下列条件之一就可触发BFC

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

BFC用途

1. 自适应两栏布局

 body {        width: 300px;        position: relative;    }    .aside {        width: 100px;        height: 150px;        float: left;        background: #f66;    }    .main {        height: 200px;        background: #fcc;        overflow: hidden;    }<body>    <div class="aside"></div>    <div class="main"></div></body>

2. 防止垂直 margin 重叠

<style>    .wrap {        overflow: hidden;    }    p {        color: #f55;        background: #fcc;        width: 200px;        line-height: 100px;        text-align: center;        margin: 100px;    }</style><body>    <p>Haha</p>    <div class="wrap">//在p外面包裹一层容器，并触发该容器生成一个BFC。那么两                                  个P便不属于同一个BFC，就不会发生margin重叠了。        <p>Hehe</p>    </div></body>

3. 清除内部浮动

如下图，往往我们需要实现下右图的效果
这里写图片描述

<div class="container">    <div class="floated">Floated div</div>    <p>巴拉巴拉---.</p></div>

在BFC中，每个盒子的左外边框紧挨着左边框的包含块（从右到左的格式化时，则为右边框紧挨）。即使在浮动里也是这样的（尽管一个盒子的边框会因为浮动而萎缩），除非这个盒子的内部创建了一个新的BFC（这种情况下,由于浮动，盒子本身将会变得更窄），

根据这些，如果这个 p 元素创建了一个新的BFC,那么它将不会紧挨着容器块的左边缘。这个方法创建了一个新的BFC解决了文字环绕在浮动元素周围的问题。

p{    overflow: hidden;}

有时我们还会遇到塌陷的问题，如

这里写图片描述
我们要实现的是

在这里简单设置父级元素

<div class="p" style="float:left;">    <div class="c">1</div>    <div class="c">2</div>    <div class="c">3</div></div>

可以得到结果，这里边框的长度也变小了
这里写图片描述

除了设置BFC来消除浮动外，还有clear属性

0 0