CSS中的margin塌陷和margin合并BUG以及BFC的常见应用

YF-SOD

已于 2023-01-31 17:20:14 修改

阅读量739

点赞数 1

分类专栏： CSS 文章标签： margin塌陷 margin合并 BFC元素 CSS中的BUG BFC的常见应用

于 2021-03-16 21:02:00 首次发布

本文链接：https://blog.youkuaiyun.com/AIWWY/article/details/113930656

版权

CSS 专栏收录该内容

17 篇文章

订阅专栏

margin塌陷

BUG表现形式

例如下图，正常情况下，.content设置了margin-left,margin-top会使它相对父集偏移，即红色方块应该会出生在黑色大正方体的右下方，而实际情况却只出生在了右上方，即margin-top属性没有生效的，并且当我们把margin-top属性加大后，当它大于.wrapper的top边距100px时，它会带动着它的父集一起移动，且在相对黑色正方体中的位置不变，如果外层在套一层父集也一样，当大于那层父集的margin-top时，会带着3个元素一起动，它们之间的位置不会变。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.wrapper{
			width: 200px;
			height: 200px;
			background-color: black;
			margin-top: 100px;
			margin-left: 100px;
		}
		.content{
			width: 100px;
			height: 100px;
			margin-left: 100px;
			margin-top: 100px;
			background-color: red;
		}
	</style>
</head>
<body>	
	<div class="wrapper">
		<div class="content"></div>
	</div>
</body>
</html>

运行结果

margin塌陷BUG解决方法

一.在父集元素.wrapper中设置border-top属性，例如border-top:1px solid red。

如何成为BFC元素及作用

二.给父元素.wrapper设置以下属性使子元素成为 BFC（Block Formatting Context 格式化上下文）元素，理解为另一种CSS的渲染规则。（推荐使用）

浮动元素，float 除 none 以外的值；
定位元素，position为absolute或fixed；
display 为以下其中之一的值 inline-block，table-cell，table-caption，flex，inline-flex；
overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC元素作用：

1.包含浮动元素，不被浮动元素所覆盖

2.解决父子元素的margin塌陷问题

margin合并

BUG表现形式

例如下图，正常情况下，.box1设置了magin-bottom：100px，.box2设置了margin-top：200px，按理解2个间距应该是300px，而实际情况缺是只有200px像素，当2个处于上下关系的元素内容，（不一定是兄弟，.box2外在套成div也是一样，不过注意当div设置了margin时有可能要讨论margin塌陷的情况）设置margin-bottom和margin-top时，实际距离会合并成之间最大的那个距离。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			height: 20px;
			background-color: black;
			margin-bottom: 100px;
			border-bottom: 1px solid red;
		}
		.box2{
			height: 20px;
			margin-top: 200px;
			background-color: red;
		}
	</style>
</head>
<body>	
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

运行结果

margin塌陷BUG解决方法

一.在.box1或.box2外层套一层父元素（两个都套也行）。然后使父集元素下的一个子元素成为 BFC（Block Formatting Context 格式化上下文）元素即可。

二.也可以不解决，通过数学直接算就行了（推荐使用）

BFC的常见其它应用

通常用来解决浮动元素产生了浮动流的影响，因为产生了浮动流的元素，块级元素看不到他们，而产生了BFC的元素和文本类元素以及文本都能看到浮动元素。

1.可以用在2或3栏布局中解决覆盖问题，在只设置其中的1栏或2栏浮动，让剩下的1栏自适应，通常剩下的1栏在未成为BFC元素时，是会被设置了浮动的元素覆盖，虽然看起来像是2栏或3栏布局，且输入文字也没问题（因为文档流能看到浮动元素），但实际上是被覆盖的，可以通过设置opacity查看，只有成BFC元素后才不会被覆盖。

2.可以用在解决图片环绕文字问题，原因同上。