CSS中的BFC

最新推荐文章于 2024-08-22 11:06:05 发布

aevmb80648

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量91

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/liujunhang/p/10735049.html

版权

CSS当中BFC介绍

在前端当中，我们都知道标准文档流，我们在开发的时候，经常会碰到block和inline。而下文要说到的BFC就是对块级盒子的格式化。当然block级别的盒子是BFC，那么inline级别的盒子也同样存在ifc。

介绍

首先，我们先来看一下FC的概念。

 FC是Formatting Context的缩写，表示页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

而BFC的概念如下:

 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

如何生成

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

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

约束规则

浏览器对于BFC这块区域的约束规则如下：

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

之前在网上网友对于内容进行过分解，我们拿过来借鉴一下：

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

仔细研究后你会发现，很多css的规则其实都是脱身于BFC的规则。

BFC的应用

1、防止margin重叠

在标准文档流当中，两个盒子垂直排列就会产生bfc，一旦产生bfc就会导致盒子的margin重叠。

我们可以让两个盒子处于独立的bfc当中，就可以避免产生margin重叠现象。

例如下面的例子就发生了重叠:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:nth-of-type(1) {
            margin-bottom:10px;
        }
        div:nth-of-type(2) {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>

下面是触发了bfc之后的效果，没有发生重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1,.d2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .d1 {
            margin-bottom:10px;
            border:2px solid blue;
            
        }
        .d2 {
            margin-top:30px;
            border:2px solid black;
           
        }
        .box {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="d1"></div>
    </div>
    <div class="d2"></div>
</body>
</html>

上面代码实现的原理是通过overflow:hidden;让两个盒子处于两个bfc当中，就不会发生重叠。

2、浮动相关的问题

当一个子元素浮动之后，父元素如果没有设置高度，那么父元素会随着子元素的浮动而失去高度，这个时候我们可以给父元素触发BFC，这样父元素就会重新的包裹子元素。因为在bfc中，浮动的元素也参与高度计算。

转载于:https://www.cnblogs.com/liujunhang/p/10735049.html

aevmb80648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的BFC

CSS当中BFC介绍在前端当中，我们都知道标准文档流，我们在开发的时候，经常会碰到block和inline。而下文要说到的BFC就是对块级盒子的格式化。当然block级别的盒子是BFC，那么inline级别的盒子也同样存在ifc。介绍首先，我们先来看一下FC的概念。 FC是Formatting Context的缩写，表示页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子...
复制链接

扫一扫