首页 > 代码库 > BFC---任性跑路的布局1

BFC---任性跑路的布局1

2024-07-19 10:50:42   219人阅读

Block Formatting Context （块格式化上下文）简称：BFC；它是W3C CSS 2.1 规范中的一个概念，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等；

要知道为什么会跑路，首先便了解BFC的布局规则：

☆

BFC布局规则

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

☆

一、什么情况下会产生block formatting context：

1、浮动元素（float: left | right）；

2、绝对定位元素（position: absolute | fixed）；

3、行内块元素（display: inline-block）；

4、表格的单元格（display: table-cells，TD、TH）；

5、表格的标题（display: table-captions，CAPTION）；

6、‘overflow‘ 特性不为visible 的元素（除非该值已经传播到viewport?）；

 

二、BFC的三个特性：

  • BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

    按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

    因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

  • BFC不会重叠浮动元素
  • BFC可以包含浮动

三、如何使用BFC：

例：

<style type="text/css">
body {

margin: 0;

}

.red {
width: 200px;
height: 150px;
float: left;
background: red;
}

.green {
height: 200px；
width: 300px;
background: green;
}
</style>
<body>
<div class="red"></div>
<div class="green"></div>
</body>

显示图：

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

因此，此时即使在CSS的green里输入margin-top的值，它也是内嵌在一起，两个一起动。但我们可以通过清除浮动或触发green生成BFC， 来实现自适应两栏布局。

清除浮动：

.green{
clear: both;
}

触发green:

.green {
overflow: hidden;
}

显示图：

 

BFC---任性跑路的布局1


联系
我们