页面布局高度塌陷问题和解决方案

最新推荐文章于 2022-10-18 20:38:25 发布

小白的问问

最新推荐文章于 2022-10-18 20:38:25 发布

阅读量953

点赞数

分类专栏：前端 html 学习

本文链接：https://blog.csdn.net/a695005548/article/details/115701442

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html 学习

6 篇文章 0 订阅

订阅专栏

页面布局高度塌陷问题和解决方案

产生高度塌陷的原因

	如果我们未对父元素设置高度，默认被子元素撑开，而一旦子元素脱离标准文档流，子元素不在文档流中占有原来的位置。此时父元素高度塌陷，导致布局混乱。

创建一个div1，再在其中创建一个子div2 ，代码如下。父元素不设置高度。子元素设置左浮动（脱离标准文档流）。

<style type="text/css">
		.div1{
			background-color: #0000FF;
 			border: 2px solid red;		
		}
		.div2{
			background-color: #008000;
			width: 100px;
			height: 100px;
			float: left;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>

运行效果如图：父div高度塌陷。
在这里插入图片描述
解决方案
一、直接给父元素设置高度。父元素塌陷本就因为自身未设定高度。默认被子元素撑开。但这种方式显然不好，父元素高度设限，不能再随子元素高度扩张。

二、在浮动元素后边添加同级块元素。父元素因为子元素脱离文档流而高度塌陷。我们可以通过添加其他块状子元素，给定高度。把父元素高度撑起来。(在div2后添加div3)

<style type="text/css">
		.div1{
			background-color: #0000FF;
 			border: 2px solid red;	
 		}
		.div2{
			background-color: #008000;
			width: 100px;
			height: 100px;
			float: left;
		}
		.div3{		
			height: 100px;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2"></div>
			// 添加div3，设置高度和div2一致。用来把父元素div1撑起来
			<div class="div3"></div>
		</div>
	</body>

三、仍然是在浮动的子元素后添加块元素。但是该块元素不设置高度。通过clear 属性来解决。

	clear属性可以消除浮动元素对当前元素的浮动影响。 属性值：left, right, both 。分别消除左侧、右侧、俩侧浮动元素的影响。可以理解为：设置clear属性的元素的外上边框，正处于对应浮动元素的下边框，并会在上边框之上增加清除空间。所以div3设置clear:left 或 clear:both 。

<style type="text/css">
		.div1{
			background-color: #0000FF;
 			border: 2px solid red;	
 		}
		.div2{
			background-color: #008000;
			width: 100px;
			height: 100px;
			float: left;
		}
		.div3{		
			clear:left;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2"></div>
			//设置clear属性
			<div class="div3"></div>
		</div>
	</body>

但是以上是通过增加多余的元素来实现的（div3只是为了布局，撑高度，没有存在的意义）。我们可以为父元素设定after 伪类来为父元素实现，代码如下:

		.commonClear:after{
			content:"";
			display: block;
			clear: both;
		}
		
	<body>
		// commonClear可作为公用的，用来解决高度塌陷问题
		<div class="div1 commonClear">
			<div class="div2"></div>
		</div>
	</body>

四、每个元素都有隐藏的属性叫BFC（不详细描述）,该属性默认是关闭的。我们可以通过开启BFC来解决高度塌陷问题。

开启BFC的元素具有以下特性：
1、父子元素的垂直外边距不会重叠
2、元素不会被浮动元素覆盖。
3、元素可以包含浮动的子元素

开启方式：
1、设置元素浮动，给父元素设置元素浮动，但这种方式会让父元素宽度丢失。父元素不单独跨一行，父元素同级下边的元素，无论是块元素还是行内元素，都会上移。不建议采用
2、设置元素的display属性为inline-block。 也会导致父元素宽度丢失。
3、设置overflow值为hidden（其他非visible值也可以。hidden 副作用最小）。
4、设置元素绝对定位（后续描述）

需要注意的是。IE6没有BFC。但有另一个隐藏属性hasLayOut。在ie6可以通过设定zoom:1来开启hasLayOut。来解决高度塌陷问题。

小白的问问

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面布局高度塌陷问题和解决方案

页面布局高度塌陷问题和解决方案一、产生高度塌陷的原因如果我们未对父元素设置高度，默认被子元素撑开，而一旦子元素脱离标准文档流，子元素不在文档流中占有原来的位置。此时父元素高度塌陷，导致布局混乱。创建一个div1，再在其中创建一个子div2 ，代码如下。父元素不设置高度。子元素设置左浮动（脱离标准文档流），...
复制链接

扫一扫

专栏目录