当前位置：首页 > news >正文

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

news 2023/6/6 13:45:21

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

产生高度塌陷的原因

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

创建一个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。来解决高度塌陷问题。

查看全文

原文地址:https://blog.csdn.net/a695005548/article/details/115701442

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 809451989@qq.com 进行投诉反馈，一经查实，立即处理！