何为高度塌陷，如何解决?

前面的文章我们介绍了关于css中的元素浮动，今天我们要讲的高度塌陷问题就是因为元素浮动造成的。

那么何为高度塌陷呢？

在文档流中，父元素的高度默认是被子元素撑开的（没有设置宽高的时候），也就是子元素多高，父元素就多高。当父元素的子元素设置为浮动类型时，那么因为其子元素脱离正常文档流，所以父元素无法检测到子元素的高度而产生折叠，这就是所谓的高度塌陷。

<head>
<style>.right {height: 100px;width: 100px;background-color: yellow;float: right;}.block {/* height: 200px;width: 200px; */background-color: green;}</style>
</head><body><div class="block"><div class="right">右浮动</div></div>
</body>

如图可知，由于发生了高度塌陷，父元素完全折叠，我们看不到父元素。

高度塌陷引发的问题：

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

如何解决高度塌陷问题？

1，给父元素设置宽高，因为宽高已规定，所以不存在高度塌陷问题。但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

2，给父元素开启BFC（有较小的副作用，后面的文章会专门介绍BFC）

3，使用clear属性清除浮动影响（有瑕疵）

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

    <style>.right {height: 100px;width: 100px;background-color: yellow;float: right;}.block {/* height: 200px;width: 200px; */background-color: green;}.empty {clear: both;}</style><div class="block"><div class="right">右浮动</div><div class="empty"></div></div>

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

4，使用伪元素：：after （推荐）

 <style>.right {height: 100px;width: 100px;background-color: yellow;float: right;}.block {/* height: 200px;width: 200px; */background-color: green;}.block::after{content: "";display: block;clear: both;}</style><div class="block"><div class="right">右浮动</div></div>

5，使用伪类.clearfix（一个特殊的伪类，可以当作了解）

 <style>.right {height: 100px;width: 100px;background-color: yellow;float: right;}.block {/* height: 200px;width: 200px; */background-color: green;}.clear::before,.clear::after {content: "";display: block;clear: both;}</style><div class="block clear"><div class="right">右浮动</div></div>

以上就是关于解决高度塌陷的五种方法，希望能帮到有缘人

何为高度塌陷，如何解决?相关推荐

css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
CSS——高度塌陷以及解决方法
文章目录前言一.什么是高度塌陷? 二.高度塌陷的解决方法 1.解决方法 2.开启BFC 3.开启BFC的特点总结前言本文主要介绍了高度塌陷产生的原因以及解决方法一.什么是高度塌陷? 高度塌 ...
什么是高度塌陷以及高度塌陷的解决办法
什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷. 高度塌陷怎么解决? 方法一:给父元素一个固定的高度缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推 ...
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...
absolute导致的高度塌陷问题——解决方法
前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题,以前代码写的少所以遇到问题就是查查查,问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查,所以这次索性总结一 ...
前端----高度塌陷及解决办法(最详细解)
高度塌陷产生原因: 在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失. 解决高度塌陷缘由: 由于高度塌 ...
高度塌陷以及解决方法
高度塌陷问题在文档流中,父元素的高度默认被子元素撑开的,也就是说子元素多高父元素就多高,但是当为我们子元素设置浮动以后,子元素就会完全脱离文档流,此时会导致子元素无法撑开父元素的高度,导致父元素的高 ...
【Css】使用float:left浮动后，导致后面div高度“塌陷”的解决办法（示例和图示）
正确的样式:在父元素中增加一条:overflow:hidden; 错误的样式: 上图,当"精选推荐"的span使用float:left后,后面的div线顶上去了. 解决办法: 在父 ...
如何解决高度塌陷【超全面】
高度塌陷是什么? 父元素的高度一般是被子元素或者内容撑开,若设置子元素浮动,则子元素就会脱离文档流,也就撑不开父元素的高度了.从而导致父元素的高度丢失,页面布局混乱如何解决高度塌陷? 解决高度塌陷的 ...

何为高度塌陷，如何解决?

何为高度塌陷，如何解决?相关推荐

最新文章

热门文章