高度塌陷问题-CSDN博客

本文链接：https://blog.csdn.net/Cherry_Zj/article/details/116355987

文章目录

高度塌陷问题

高度塌陷问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是，为子元素设置浮动以后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。
我们可以将父元素的高度写死，以避免出现高度塌陷问题，但是一旦高度写死，父元素的高度就不能自动适应子元素的高度，所以这种方案是不推荐使用的。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				/*
				 * 为box1设置边框
				 */
				border: 10px red solid;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

解决塌陷问题方法一

根据W3C标准，在页面中元素都有一个隐含属性叫做Block Formatting Context简称BFC
该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会有如下特性：

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

如何开启元素的BFC:

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

在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout

该属性的作用和BFC类似，所以在IE6浏览器可以通过开启hasLayout来解决问题
开启hasLayout的开启方式：直接将元素的zoom设置为1即可
zoom表示放大的意思，后面跟着一个数值，写几就将元素放大几倍
zoom这个样式，只在IE浏览器中支持，其他浏览器都不支持
zoom:1;表示不放大元素，但是通过该样式可以开启hasLayout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				border: 10px red solid;
				zoom: 1;
				overflow: hidden;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			.box3{
				width: 1000px;
				height: 100px;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

解决高度塌陷问题方法二

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以它是可以撑开父元素的高度的，然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				border:1px solid red;
				
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			.box3{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

解决高度塌陷问题方法三

可以通过after的伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的结构。推荐使用，几乎没有副作用。
在IE6中不支持after伪类，所以在IE6中还需要使用hasLayout来处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				border:1px solid red;
				
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			.clearfix:after{
				/*添加一个内容*/
				content: "";
				/*将它转换成一个块元素*/
				display: block;
				/*清楚两侧浮动*/
				clear: both;
			}
			.clearfix{
				zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
		</div>
	</body>
</html>