对BFC详细理解和使用

. . . . .

已于 2022-08-16 22:55:20 修改

阅读量2.2k

点赞数 5

分类专栏：前端开发文章标签： css css3 html

于 2019-08-02 12:03:47 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/98170546

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

为什么会有BFC?
BFC是什么？
如何触发BFC?
BFC可以解决什么问题？

一. 为什么会有BFC

从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC

二. BFC是什么

BFC: block formatting context 块级格式化上下文。
BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。

三. 如何触发BFC呢？

最最常用的触发规则有如下4种：
在这里插入图片描述
上面的4不全，
display的值为：inline-block, table-cell, table-caption, flex，inline-flex

四. BFC可以解决的问题：

1. 解决浮动元素令父元素高度坍塌的问题

注意（关联想到的）：
1. 如果是绝对定位脱离的文档流，不会触发BFC;
2. 设置绝对定位的元素都会变成块(block)元素；

假设一个页面中有一个父元素和几个子元素，子元素都设为浮动，那么父元素高度将会塌陷，这是因为浮动的子元素脱离了文档流。由于父元素高度的塌陷，那么也会影响到父元素周围的其他元素。

如何解决呢？这时就可以给父元素添加overflow: hidden;来使父元素成为一个BFC。

举例：
高度坍塌情况：

<!DOCTYPE html>
<html>
<head>
	<title>BFC</title>
	<style type="text/css">
		#parent1 {
			width: 1000px;
			background: #ccc;
			/* overflow: hidden; */
			/* float: left; */
		}
		#parent2 {
			width: 500px;
			height: 500px;
			background: skyblue;
		}
		#child1 {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#child2 {
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
	/* 	#parent1::after {
			display: block;
			content: '';
			clear: both;
		} */
		/* #temp {
			clear: both;
		} */
	</style>
</head>
<body>
	<div id="parent1">
		<div id="child1"></div>
		<div id="child2"></div>
		<!-- <div id="temp"></div> -->
	</div>
	<div id="parent2">
		
	</div>
</body>
</html>

在这里插入图片描述

通过触发BFC来避免塌陷情况：

<!DOCTYPE html>
<html>
<head>
	<title>BFC</title>
	<style type="text/css">
		#parent1 {
			width: 1000px;
			background: #ccc;
			overflow: hidden;
			/* float: left; */
		}
		#parent2 {
			width: 500px;
			height: 500px;
			background: skyblue;
		}
		#child1 {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#child2 {
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
	/* 	#parent1::after {
			display: block;
			content: '';
			clear: both;
		} */
		/* #temp {
			clear: both;
		} */
	</style>
</head>
<body>
	<div id="parent1">
		<div id="child1"></div>
		<div id="child2"></div>
		<!-- <div id="temp"></div> -->
	</div>
	<div id="parent2">
		
	</div>
</body>
</html>

在这里插入图片描述

触发了BFC的容器就是页面上完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素。为了保证这个规则，触发了BFC的父元素在计算高度时，不得不让参与浮动的子元素也参与进来，变相的实现了清除内部浮动的目的。

但有的时候出于布局需要也可能无法给父元素设置这些属性，而解决高度坍塌，常用的还有如下办法：

1. 让父元素也浮动起来，这样父元素和子元素一起脱离文档流。因此父元素就能自适应子元素的高度。

注意：这种父元素也会脱离文档流。

<!DOCTYPE html>
<html>
<head>
	<title>BFC</title>
	<style type="text/css">
		#parent1 {
			width: 1000px;
			background: #ccc;
			/* overflow: hidden; */
			float: left;
		}
		#parent2 {
			width: 500px;
			height: 500px;
			background: skyblue;
		}
		#child1 {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#child2 {
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
	/* 	#parent1::after {
			display: block;
			content: '';
			clear: both;
		} */
		/* #temp {
			clear: both;
		} */
	</style>
</head>
<body>
	<div id="parent1">
		<div id="child1"></div>
		<div id="child2"></div>
		<!-- <div id="temp"></div> -->
	</div>
	<div id="parent2">
		
	</div>
</body>
</html>

优点：代码量少。
缺点：影响之后的元素排列，而引发其他问题。
在这里插入图片描述

2. 给父元素添加一个固定高度，但是这个方式只适用已知子元素高度的情况下。

优点：没有学习成本。
缺点：不灵活，也难以维护。

3. 在浮动元素后面添加一个空元素，并设置`clear: both`

<!DOCTYPE html>
<html>
<head>
	<title>BFC</title>
	<style type="text/css">
		#parent1 {
			width: 1000px;
			background: #ccc;
			/* overflow: hidden; */
			/* float: left; */
		}
		#parent2 {
			width: 500px;
			height: 500px;
			background: skyblue;
		}
		#child1 {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#child2 {
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
	/* 	#parent1::after {
			display: block;
			content: '';
			clear: both;
		} */
		/* #temp {
			clear: both;
		} */
	</style>
</head>
<body>
	<div id="parent1">
		<div id="child1"></div>
		<div id="child2"></div>
		<div style="clear:both;"></div>
	</div>
	<div id="parent2">
		
	</div>
</body>
</html>

在这里插入图片描述

优点：简单易懂，容易掌握。
缺点：会增加无意义的标签。

4. 为浮动元素的父元素设置一个伪元素 `::after {content: '';clear:both;}`

注意:在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性

<!DOCTYPE html>
<html>
<head>
	<title>BFC</title>
	<style type="text/css">
		#parent1 {
			width: 1000px;
			background: #ccc;
			/* overflow: hidden; */
			/* float: left; */
		}
		#parent2 {
			width: 500px;
			height: 500px;
			background: skyblue;
		}
		#child1 {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#child2 {
			width: 100px;
			height: 100px;
			background: green;
			float: left;
		}
		#parent1::after {
			display: block;
			content: '';
			clear: both;
		}
		/* #temp {
			clear: both;
		} */
	</style>
</head>
<body>
	<div id="parent1">
		<div id="child1"></div>
		<div id="child2"></div>
		<!-- <div id="temp"></div> -->
	</div>
	<div id="parent2">
		
	</div>
</body>
</html>

在这里插入图片描述

2. 解决自适应布局的问题

对于文字环绕：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 130px;
            background: #cccccc;
            float: left;
        }
        .content {
            background: #cc0000;
            /* overflow: hidden; */
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="content">
        <p>
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
        </p>
    </div>
    
</body>
</html>

在这里插入图片描述

将页面右面的容器触发BFC，触发后就会变成一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，进而实现两栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 130px;
            background: #cccccc;
            float: left;
        }
        .content {
            background: #cc0000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="content">
        <p>
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
            发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
        </p>
    </div>
    
</body>
</html>

在这里插入图片描述

其他方式实现左侧固定，右侧自适应的

左边左浮动，右边设置margin-left
左边绝对定位，右边设置margin-left
flex布局

3. 解决外边距`垂直`方向（注意水平不会有重合问题）重合的问题

重合时，一般较大的会吞并较小的，如果相等，则二者取其一。
比如：
在这里插入图片描述
但实际上为20px。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#top {
			width: 100px;
			height: 100px;
			background: red;
			margin-bottom: 20px;
		}
		#bottom {
			width: 100px;
			height: 100px;
			background: green;
			margin-top: 20px;
		}
		/* #wrapper {
			overflow: hidden;
		} */
	</style>
</head>
<body>
	<div id="top"></div>
	<!-- <div id="wrapper"> -->
		<div id="bottom"></div>
	<!-- </div> -->
	
</body>
</html>

在这里插入图片描述

解决办法：使其中一个加一层父元素，并使父元素触发BFC

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#top {
			width: 100px;
			height: 100px;
			background: red;
			margin-bottom: 20px;
		}
		#bottom {
			width: 100px;
			height: 100px;
			background: green;
			margin-top: 20px;
		}
		#wrapper {
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div id="top"></div>
	<div id="wrapper">
		<div id="bottom"></div>
	</div>
	
</body>
</html>

在这里插入图片描述

总结：

BFC的含义：块级格式化上下文。目的：形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。
形成BFC的常用条件：4个
BFC的应用场景：3个：1. 解决父元素高度塌陷；2. 两栏布局，防止文字包围；3. 解决元素间外边距重合问题。

参考：https://www.bilibili.com/video/av46317897?from=search&seid=406755512276276637

. . . . .

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
对BFC详细理解和使用

为什么会有BFC?BFC是什么？如何触发BFC?BFC可以解决什么问题？一. 为什么会有BFC从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC二. BFC是什么BFC: block formatting context 块级格式化上下文。BFC的目的就是形成一个完成独立的空间...............
复制链接

扫一扫