BFC理解

2024-01-15 11:46:16

https://blog.csdn.net/sinat_36422236/article/details/88763187

https://blog.csdn.net/ws9029/article/details/114181116?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

BFC：块级格式化上下文，一个独立的渲染区域，内部的元素不会影响到外部的元素，外部的元素也不会对内部的元素造成影响。

当BFC外部存在浮动时，它不应该影响BFC内部的布局，此时BFC会通过变窄而不与浮动有重叠，同样BFC内部存在浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度，从而解决高度坍塌问题。

BFC的布局规则：

内部的box在垂直方向上一个接一个放置
垂直方向的距离由margin决定。同一个BFC中两个相邻的box的margin会发生重叠
内部元素的margin box的边与包含块的border box相接触，即使存在浮动。
BFC不会与浮动元素重叠
BFC内部元素与外部元素不会相互影响
BFC不会出现高度坍塌的问题

如何创建BFC：

float：left、right
position: absolute、fixed
display：inline-block、table-cell、flex、table-caption、inline-flex
overflow: hidden、scroll、auto
html元素(注意不是body，因为body会出现高度坍塌)

BFC的用法：

1.解决外边距重叠

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 20px;
		}
		.box:nth-child(2){
			background-color: green;
		}
	</style>
</head>
 
<body>
	<div class="box"></div>
	<div class="box"></div>
</div>
</body>
</html>

如上图所示，在同一个BFC中的元素margin发生了重叠，激活其中一个box的BFC，用如何创建BFC中的各种方法都可以，这里使用display: inline-block; 可以观察出第二个盒子已经不受外部影响也不影响外部元素了。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 20px;
		}
		.box:nth-child(2){
			display: inline-block;
			background-color: green;
		}
	</style>
</head>
 
<body>
	<div class="box"></div>
	<div class="box"></div>
</div>
</body>
</html>

2.解决外边距溢出

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.content{
			width: 50px;
			height: 50px;
			background-color: black;
			margin-top: 50px;
		}
	</style>
</head>
 
<body>
	<div class="box">
		<div class="content"></div>
	</div>
</div>
</body>
</html>

本来应该是content距离父元素顶部50px，但是由于外边距溢出，导致父元素box也向下移动50px。

将激活内部元素的BFC

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.content{
			width: 50px;
			height: 50px;
			background-color: black;
			margin-top: 50px;
			display: inline-block;
		}
	</style>
</head>
 
<body>
	<div class="box">
		<div class="content"></div>
	</div>
</div>
</body>
</html>

3.清除浮动

通常情况下，浮动元素会脱离文档流造成其他的元素向前移动而被浮动元素遮挡，如下例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: black;
			float: left;
		}
		.box2{
			width: 400px;
			height: 400px;
			background-color: brown;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

若激活box2的BFC属性，则不会被浮动元素所影响

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: black;
			float: left;
		}
		.box2{
			display: inline-block;
			width: 400px;
			height: 400px;
			background-color: brown;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

4.自适应两栏布局

根据第三点，BFC会自动压缩以不会被浮动元素影响可以实现自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: green;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: brown;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

码农公寓