3-BFC

最新推荐文章于 2022-05-21 00:21:10 发布

abgu66884

最新推荐文章于 2022-05-21 00:21:10 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/ogrowup/p/8482218.html

版权

前面“2-两栏布局”讲到BFC，所以查了一下BFC到底是什么。

（1）BFC是什么

Box Formatting Context

Box:

CSS布局的基本单位，Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。

元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

让我们看看有哪些盒子：

block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

run-in box: css3 中。

Formatting context ：

　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

　　CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

BFC定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

BFC布局规则：

１）内部的Box会在垂直方向，一个接一个地放置。

２）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

３）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

４）BFC的区域不会与float box重叠。（参见2.两栏布局的方法5，使用overflow）

５）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

６）计算BFC的高度时，浮动元素也参与计算

(2)那些元素会生成BFC

根元素

浮动元素，float 除 none 以外的值；

绝对定位元素，position（absolute，fixed）；

display 为以下其中之一的值 inline-blocks，table-cells，table-captions, flex, inline-flex

overflow 除了 visible 以外的值（hidden，auto，scroll）

(3)BFC常见作用

Ａ）清除内部浮动

参见BFC布局规则 6）

首先子块都是往左浮动，此时父块是撑不起来的，上下边重合。

<style type="text/css">
    .parent{border: 2px solid orange;}
    .left-child, .right-child{float: left; width:100px; height:100px; border:2px solid #a00;}
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>
</body>

做法：对父块添加overflow:hidden;清除浮动触发生成BFC

B) 自适应两栏布局

参见BFC布局规则3）和 4）

首先左子块浮动后，右边子块会忽视她，直接与父块边缘相接触

<style type="text/css">
    .parent{}
    .left-child{width:100px;height: 100px; background: #f00; float:left;margin-right: 20px;}
    .right-child{background:#aaa;height:200px; }
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>
</body>

做法：对右边子块添加overflow:hidden;触发生成BFC，右边子块会根据父块的宽度减去左边浮动块的宽度自适应宽度。

C) 防止垂直方向margin重叠

参见BFC布局规则2）

首先，在标准文档流中，块级标签之间竖直方向会以大的为准产生margin的坍塌现象。

<style type="text/css">
    .parent{}
    .up-child{width:100px;height: 100px; background: #f00; margin-bottom: 30px;}
    .bt-child{width:100px;height: 100px; background:#aaa; margin-top: 50px;}
</style>
</head>
<body>
<div class="parent">
    <div class="up-child"></div>
    <div class="bt-child"></div>
</div>
</body>

显然30px陷在了50px里面了

做法：对上面或是下面的子块再包一层div，overflow:hidden触发其生成一个BFC，这样up-child和bt-child不在同一个BFC，就不会发生margin重叠

<style type="text/css">
    .parent{}
    .up-child{width:100px;height: 100px; background: #f00; margin-bottom: 30px;}
    .bt-child{width:100px;height: 100px; background:#aaa; margin-top: 50px;}
    .bfc{overflow: hidden;}
</style>
</head>
<body>
<div class="parent">
    <div class="up-child"></div>
    <div class="bfc">
        <div class="bt-child"></div>
    </div>
</div>
</body>