深挖BFC(BFC是什么？怎么触发？如何解决常见问题？)

最新推荐文章于 2024-09-17 10:24:19 发布

峨M峰

最新推荐文章于 2024-09-17 10:24:19 发布

阅读量120

点赞数

分类专栏： css小技巧文章标签： css html5 html 前端 css3

本文链接：https://blog.csdn.net/weixin_46719229/article/details/119943178

版权

css小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了BFC（Block Formatting Context）的概念，包括其触发条件和在解决CSS布局问题中的应用，如边距重叠、margin塌陷及高度塌陷。通过设置overflow:hidden等属性创建BFC，可以有效避免这些问题，确保元素间间距和高度计算的正确性。

摘要由CSDN通过智能技术生成

深挖BFC(BFC是什么？怎么触发？如何解决常见问题？)

1.BFC是什么

BFC（Block Formatting Context ）块级格式化上下文。可以把BFC看成一个被隔离的空间，BFC的子元素不会对外面的元素产生影响。

2.BFC触发条件

float:left|right;
overflow: auto (常用)| scroll | hidden
display: inline-block | table-caption | table-cell |flex |grid
positio: absolute|fixed

3.利用BFC解决常见问题

3.1 边距重合

<style>
.box{
    height: 50px;
    width: 100px;
}
.box1{
    margin-bottom: 20px;
    background-color: aqua;
}
.box2{
    margin-top: 20px;
    background-color: olivedrab;
}
.container{
    overflow: hidden;
}
</style>
</head>
<body>
    <!-- 未使用bfc处理，box1的下边距与box2的上边距重合，两个div上下之间的距离还是20px -->  
    <div>
        <div class="box box1"></div>
        <div class="box box2"></div>
	</div>
     <!-- 使用bfc处理，两个div上下之间的距离是40px -->  
    <div>
        <div class="container">
        	<div class="box box1"></div>
        </div>
        <div class="container">
        	<div class="box box2"></div>
        </div>
    </div>
</body>

效果对比

在这里插入图片描述

3.2 margin塌陷

<html>
    <head>
        <style>
            .box,
            .otherBox{
                height: 200px;
                width: 200px;
                background-color: orange;
            }
            .otherBox{
                overflow: hidden;
            }
            .box1{
                margin-top:40px ;
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <hr>
        <!-- 未使用bfc处理，给box1添加上边距，导致margin塌陷，整个box距离上面40px --> 
        <div class="box" >
            <div class="box1"></div>
        </div>
        <hr>
         <!-- 使用bfc处理，给box1添加上边距，距离box上边框40px --> 
        <div class="otherBox" >
            <div class="box1"></div>
        </div>
    </body>
</html>

效果对比

在这里插入图片描述

3.3 高度塌陷

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box,
			.otherBox{
				width: 200px;
				border: 2px solid black;
			}
			.otherBox{
				overflow: hidden;
			}
			.box1{
				width: 200px;
				height: 100px;
				background-color: orange;
				float: left;
			}
		</style>
	</head>
	<body>
        <!-- 未使用bfc处理，由于未给box元素添加高度，导致高度塌陷  --> 
		<div class="box">
			<div class="box1"></div>
		</div>
         <!-- 使用bfc处理，box1元素高度撑起box元素--> 
		<div class="otherBox">
			<div class="box1"></div>
		</div>
		
	</body>
</html>

</html>