css高度塌陷

最新推荐文章于 2024-07-12 20:49:16 发布

憨憨果实

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量156

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_39601385/article/details/104589876

版权

css高度塌陷

逆战班！！web前端学习。

产生高度塌陷的原因？

在文档流中页面中的块级元素：按照从上到下的方式逐个排列，页面中的行内元素：按照从左到右的方式逐个排列。
如果块状元素不设置宽高，那么它的宽度会继承父元素，而他的高度会被其子元素的内容撑开。
实际情况如下：
给box1设置一个500的宽，背景色为红色，其子元素box2宽高均为200，背景色为绿色，按照文档流的显示规则，box1的高度会被其子元素撑开，因为box2的高度设为200px，所以在box1在不设置高度的情况下仍然有200px的高度。
在这里插入图片描述
代码如下

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box1{
			margin: 0 auto;
			width: 500px;
			background-color: red;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>

浮动带来的影响！
浮动模型的特点是浮动的盒子可以向左向右移动直到其外边沿接触包含块的外边沿，或接触另一个浮动盒子的外边沿。浮动盒子也会脱离正常的文档流，因此常规流中的其他块级盒子的表现，几乎当浮动盒子根本不存在原因。
如果给子元素box2设置一个向左的浮动，那么box2就会脱离文档流，其父元素box2也就失去了box1高度的支撑，这样就造成了高度塌陷。
如下图所示
在这里插入图片描述
代码如下

.box1 {
				margin: 0 auto;
				width: 500px;
				background-color: red;
				border: 5px solid red;
			}
			.box2 {
				float: left;
				width: 200px;
				height: 200px;
				background-color: green;
			}

为了更加直观的体现高度塌陷的情况，我为box1加上了一个5像素的边框，可以看到box1已经发生了高度塌陷，显然我们在网页设计中要避免这种情况的发生。下面就例举了几种常见的解决办法、

解决高度塌陷的办法

1.父元素设置一个高度

height:200px;
如下图所示
在这里插入图片描述
给父元素设置高度虽然可以解决高度塌陷的问题，但会引发新的问题，第一是不能保证子元素的高度一直保持不变，还有可能一开始就不知道子元素的高度，第二是当父元素中的内容高度超过父元素高度时会在父元素外显示。
在这里插入图片描述

2.父元素设置最小高度

min-height:200px;
如下图所示
在这里插入图片描述
与第一种方法相比，设置最小高度可以解决父元素内容变化问题，但同样无法解决其内部浮动元素高度变化的问题。

3.为父元素设置浮动

flot:left/right;
在这里插入图片描述
给父元素设置浮动让父元素也脱离文档流，父元素的宽高也会收缩为适应于其中内容的最小宽高，这样虽然可以完美解决高度塌陷和高度自适应的问题，但是会导致父元素的宽度丢失，对后续元素会有影响。

4.父元素设置为内联块元素

display:inline-block
在这里插入图片描述
给父元素设置display:inline-block可以同时解决高度塌陷和高度自适应的问题，因为内联块元素具备内容收缩的属性，但同样也丢失了块状元素的特性，失去了换行的效果，也就是独行显示。如下图所示

5.触发bfc规则

overflow:hidden;
在这里插入图片描述给父元素设置overflow:hidden;实际上也是触发了bfc的规则
1.计算BFC的高度时，浮动元素的高度也参与计算
2.开启BFC的元素可以包含浮动的子元素
虽然这种解决方法看上去已经很完美了但还是有缺陷，因为给父元素加上overflow:hidden会使超出父元素的部分隐藏，在设计一些特殊布局时无法使用。

6.清除浮动

.clear:both;
在这里插入图片描述在父元素的最后面添加一个空白的块状元素给它一个clear：both的声明。
clear的属性有both、left、right和none 用于指定盒子的哪一侧不应该挨着浮动盒子，这并不是简单的删除几个用于抵消前面浮动元素的标记，在清除一个元素时，浏览器会在这个元素上方添加足够大的外边距，从而将元素的上边沿垂直向下推移到浮动元素的下方。因此无论浮动元素的高度怎样变化，其父元素都能自动将高度补满，达到高度自适应的效果。
虽然这种方法能达到我们的需求，但是在每一个包含浮动元素的父元素最后面添加一个块状元素会生成过多无意义的标签使结构冗余。

7 .利用伪元素清除浮动

.clear_fix:after
在这里插入图片描述
给父元素添加一个伪元素，其本质上和clear：both是一种方法
.clear_fix:after {
content: “.”;
clear: both;
height: 0;
overflow: hidden;
display: block;
visibility: hidden;
}
因为伪元素默认都是内联元素所以要改为块状元素，然后高度设置为0将添加的内容隐藏。因为在低版本的ie浏览器不兼容高度设置为0 所以加上overflow: hidden;和visibility: hidden;是为了解决兼容问题

憨憨果实

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css高度塌陷

css高度塌陷逆战班！！web前端学习。产生高度塌陷的原因？在文档流中页面中的块级元素：按照从上到下的方式逐个排列，页面中的行内元素：按照从左到右的方式逐个排列。如果块状元素不设置宽高，那么它的宽度会继承父元素，而他的高度会被其子元素的内容撑开。实际情况如下：给box1设置一个500的宽，背景色为红色，其子元素box2宽高均为200，背景色为绿色，按照文档流的显示规则，box1的高度会...
复制链接

扫一扫