BFC

最新推荐文章于 2024-07-19 19:08:32 发布

star...

最新推荐文章于 2024-07-19 19:08:32 发布

阅读量105

点赞数

前端同时被 3 个专栏收录

18 篇文章 2 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

1、常见布局模式

CSS中的三种布局模型：流动模型（flow）、浮动模型（float）、层模型（layer）

2、BFC的原理

BFC即 Block Formatting Context（块级格式化上下文），它属于上述布局模式中的流动模型。

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

具有BFC特性的元素可以看作是隔离了的容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有一些特性。通俗来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

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

3、BFC布局规则

1）内部的box会在垂直方向，一个接一个的放置。

2）box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的box的margin会发生重叠。

3）每个元素的margin box的左边，与包含块的border box的左边相接触，即使存在浮动也是如此。

4）bfc的区域不会与float box重叠。

5）bfc就是页面上的一个隔离的容器，容器里面的子元素不会影响到外面的元素，反之亦是如此。

6）计算bfc的高度时，浮动元素也参与计算

4、形成BFC的条件

只要元素满足下面任一条件即可触发BFC特性：

1）根元素

2）float不为none

3）position为absolute或者fixed

4）display为inline-block、table-cell、table-caption、flex、inline-flex

5）overflow不为visible

5、BFC的作用

1）自适应两栏布局

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body{
			width: 300px;
		}
		.aside{
			width: 100px;
			height: 160px;
			float: left;
			background: #00FFFF;
		}
		.main{
			height: 200px;
			background: #EEE8AA;
		}
	</style>
</head>
<body>
	<div class="aside"></div>
	<div class="main"></div>
</body>

根据BFC布局规则第3条：每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此。

因此，虽然浮动的元素aside，但是main的左边依然会与包含块的左边相接触。

根据BFC布局规则第4条：BFC的区域不会与float box重叠。

我们可以通过触发main生成BFC，来实现自适应两栏布局。

.main{
    overflow: hidden;
}

当触发BFC生成BFC后，这个新的BFC不会与浮动的aside重叠，因此会根据包含块的宽度和aside的宽度，自动变窄。效果如下：

2）清除内部浮动

<head>
    <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.wrap{
			width: 300px;
			border: 1px solid #000;
		}
		.child{
			width: 100px;
			height: 100px;
			background: #FF6666;
			float: left;
		}
		.child1{
			background: #EEE8AA;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="child"></div>
		<div class="child child1"></div>
	</div>
</body>

根据BFC的高度时，浮动元素也参与计算

为达到清除浮动，我们可以触发wrap生成BFC，那么wrap在计算高度时，wrap内部的元素也会参与计算。

.wrap{
    overflow: hidden;
}

效果如下：

3）防止垂直margin重叠

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background: #FF8C00;
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
</body>

两个div之间的距离为20px，发生了margin重叠，根据BFC布局规则第2条：box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠。

我们可以在div外面包裹一层容器，并触发该容器生成一个BFC，就不会发生margin重叠了。

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background: #FF8C00;
			margin: 20px;
		}
		.wrap{
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="wrap">
		<div class="box"></div>
	</div>
</body>

总结

其实以上的例子都体现了BFC布局规则第5条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦是如此。

因为BFC内部的元素和外部的元素绝对不会相互影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部box的布局，BFC会通过变窄而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时包括浮动的高度，避免margin重叠。

star...

关注

0
点赞
踩
0

收藏

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

1、常见布局模式CSS中的三种布局模型：流动模型（flow）、浮动模型（float）、层模型（layer）2、BFC的原理 BFC即 Block Formatting Context（块级格式化上下文），它属于上述布局模式中的流动模型。它是W3C CSS2.1规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及...
复制链接

扫一扫