(1)垂直外边距重叠问题与解决方案、父子元素高度塌陷问题与解决方案

进阶路

已于 2022-04-25 19:32:11 修改

阅读量622

点赞数 1

分类专栏：前端之HTML和CSS基础文章标签： css

于 2022-04-25 19:27:13 首次发布

本文链接：https://blog.csdn.net/Q_999999/article/details/124398501

版权

前端之HTML和CSS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、垂直外边距重叠问题与解决方案

1、在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是求和。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            body{
				height: 300px;
				border: #FF0000 solid 2px;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: #AAFF7F;
				margin-bottom: 100px;	/*设置box1的垂直下外边距100px*/
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #ffaa00;
				margin-top: 10px;		/*设置box2的垂直上外边距10px*/
			}
		</style>
	</head>
	<body>
		<!--下面两个div是兄弟元素-->
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

效果图：

可以看到box1和box2的垂直相邻外边距是100px而非110px，说明外边距取最大值而非求和

解决方案：若不想取最大值，就要破坏相邻。通过给box1和box2之间添加文字或者其他标签其相邻就会被破坏。

<body>
		<!--下面两个div是兄弟元素-->
		<div class="box1"></div>
		a
		<div class="box2"></div>
</body>

2、如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 250px;
				border: #FF0000 solid 2px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #AAFF7F;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #ffaa00;
				margin-top: 50px;		/*给子元素box2设置的垂直上外边距*/
			}
		</style>
	</head>
	<body>
		<!--下面两个div是父子元素-->
		<div class="box1">
			<div class="box2"></div>
		</div>	
	</body>
</html>

效果图：

可以看到当给子元素box2设置一个垂直上外边距50px时，父元素box1会跟着一起向下移动

解决方案： 若不想传递，就要破坏相邻。默认box2是在box1的内容区显示的，可以给父元素设置边框(方法1)和padding(方法2)来破坏相邻；也可以通过给box2的上方添加文字(方法3)来破坏父子关系以破坏相邻；也可以通过before伪类(方法4和方法5)来破坏相邻。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 250px;
				border: #FF0000 solid 2px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #AAFF7F;
				/* border: #AAFF7F solid 1px; */		/*方法2*/
				/* padding-top: 1px; */					/*方法3*/
			}
            /* .clearfix::before{ */			         	/*方法4*/
				/* content: "1";
				display: block;
			} */
            .clearfix::before{			         		/*方法5*/
				content: "";
				display: table;        /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #ffaa00;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<!-- a -->		<!-- 方法1 -->
			<div class="box2"></div>
		</div>	
	</body>
</html>

二、父子元素高度塌陷问题与解决方案

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高，但当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素高度，导致父元素高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样会导致页面布局混乱。所以在页面中一定要避免高度塌陷问题。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 250px;
				border: #FF0000 solid 2px;
			}
			.box1{
				width: 100%;
				border: #000000 5px solid;	
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #ffaa00;
				float: right;		/*给box2子元素设置向右浮动*/
			}
			.box3{
				width: 100%;
				height: 100px;
				background-color: #0000ff;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

效果图：

可以看到当给box2设置向右浮动脱离文档流以后，由于box1没有设置高度，所以高度塌陷，此时box1下面的box3就会向上移动，影响布局

解决方案：

根据W3C标准，在页面中元素都有一个隐藏属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的元素

方式一.开启元素的BFC属性

设置元素浮动------使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且这种方式也会导致下边元素上移，不能解决问题。
设置元素绝对定位
设置元素为inline-block------可以解决问题，但是会导致宽度丢失，不推荐使用
将元素的overflow设置为一个非visible的值 IE6不支持 ------推荐方式： 将overflow设置为hidden是副作用最小的开启BFC的方式

在IE6及以下的浏览器中并不支持BFC，所以使用overflow的方式不能兼容IE6，在IE6中虽然没有BFC，但是具有另一个隐含属性叫做hasLayout，该属性作用和BFC类似，所在IE6浏览器可以通过开启hasLayout来解决该问题

开启hasLayout属性：直接将元素的zoom设置为1即可
zoom表示放大的意思，后面跟着一个数值，写几就将元素放大几倍

zoom:1表示不放大元素，但是可以通过该样式开启hasLayout

方式二.清除浮动

1、直接在高度塌陷的父元素的最后，添加一个空白的div,由于这个div并没有浮动，所以它是可以撑开父元素的高度的，然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 250px;
				border: #FF0000 solid 2px;
			}
			.box1{
				width: 100%;
				border: #000000 5px solid;
				
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #ffaa00;
				float: right;		/*给box2子元素设置向右浮动*/
			}
			.clear{
				clear: both;        /*将clear设置清除浮动*/
			}
			.box3{
				width: 100%;
				height: 100px;
				background-color: #0000ff;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="clear"></div>    <!--在父元素的最后添加一个clear-->
		</div>
		<div class="box3"></div>
	</body>
</html>

效果图：