前言

本文主要介绍了高度塌陷产生的原因以及解决方法

一、什么是高度塌陷？

高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>高度塌陷</title><style>.box1{border: 5px solid pink;}.box2{width: 100px;height: 100px;background-color: #bfa;float:left;   /* 若子元素设置浮动脱离文档流，则产生父元素的高度丢失，这就是高度塌陷 */}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

二、高度塌陷的解决方法

1.解决方法

将父元素的高度固定（但不推荐，因为在后续更改样式会不太方便）
开发BFC(开启BFC的方法)
在父元素结尾添加一个空的div,因为这个空的div并没有浮动，可将父元素内容撑开，但会导致页面结构增加
使用after伪类解决高度塌陷

.box1::after{

content:''; ——内容不显示，无内容显示

display:block; ——after元素是一个行内元素，将它显示为一个块元素

clear:

2.开启BFC

BFC(间接开启，或多或少会有一些不好的影响)BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区

开启BFC的方法：

1.设置元素的浮动（不推荐用来开启BFC）例如：float:left;

2.将元素设置为行内块元素（不推荐用来开启BFC）例如： display:inline-block;

3.将元素的overflow设置为一个非visible的值 overflow:hidden;

常用的方式为元素设置overflow:hidden;开启其BFC,以使其可以包含住它的子元素

3.元素开启BFC后的特点

1.开启BFC 的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

总结

以上就是今天要讲的内容，拜拜~

CSS——高度塌陷以及解决方法相关推荐

css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...
CSS盒子塌陷及解决方法
CSS盒子塌陷及解决方法 1 盒子塌陷的原因 2 如何清除塌陷 1 盒子塌陷的原因什么是盒子塌陷? 外部的盒子没有包裹住内部的浮动盒子,导致了盒子塌陷. 盒子高度塌陷原因? ①父元素没有设置高度(h ...
absolute导致的高度塌陷问题——解决方法
前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题,以前代码写的少所以遇到问题就是查查查,问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查,所以这次索性总结一 ...
高度塌陷以及解决方法
高度塌陷问题在文档流中,父元素的高度默认被子元素撑开的,也就是说子元素多高父元素就多高,但是当为我们子元素设置浮动以后,子元素就会完全脱离文档流,此时会导致子元素无法撑开父元素的高度,导致父元素的高 ...
css 高度塌陷_css高度塌陷问题如何解决 css高度塌陷问题解决方法
本篇文章小编给大家分享一下css高度塌陷问题解决方法,文中通过示例代码详细的介绍了解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来一聚教程看看. 1. 高度塌陷在文档流中 ...
解决父级元素高度塌陷问题的方法
解决父级元素高度塌陷问题的方法参考文章: (1)解决父级元素高度塌陷问题的方法 (2)https://www.cnblogs.com/anxiaobei/p/3905187.html 备忘一下.
CSS高度塌陷问题（float塌陷margin塌陷）
目录一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
什么是高度塌陷以及高度塌陷的解决办法
什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷. 高度塌陷怎么解决? 方法一:给父元素一个固定的高度缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推 ...

CSS——高度塌陷以及解决方法

文章目录

前言