【CSS】什么是高度塌陷？消除浮动的几种方法有哪些？

一. 高度塌陷

高度塌陷简单说就是，父级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。

二. 消除浮动 （四种） 1. 父级元素定义高度（不推荐）

这个方法比较简单，直接给父级元素的 height 设置一定的值就行。不过这样就写死了，不过当整体布局确定时可以使用，比较方便 。

2.结尾添加空标签，给其设置 clear：both（不推荐）

直接在高度塌陷的父元素的最后添加一个空的div，由于这个div没有浮动，所以它可以撑开父元素的高度，然后对其进行清除浮动，通过这个空白div来撑起父元素的高度，clear：both 本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。缺点是添加无意义标签，语义化差。

不给父元素设置高度，就会有高度塌陷问题，如下图：

当设置父元素高度，就没有了，但这种方法并不推荐使用：如下图

高度塌陷解决方案二：

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素

BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

开启BFC后，元素将会具有如下的特性：

1.父元素的垂直外边距不会和子元素重叠(解决父子外边距重叠的问题)

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

3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

如何开启元素的BFC

1.设置元素浮动（不推荐）

- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方式也会导致下边的元素上移，不能解决问题

2.设置元素为inline-block（不推荐）

- 可以解决高度丢失的问题，但是会导致宽度丢失，而且会有一个三像素的空白，不推荐使用这种方式

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

副作用比较小，推荐使用

4.设置元素绝对定位

元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方式也会导致下边的元素上移，不能解决问题

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

/*通过after伪类，选中box1的后边*/

解决高度塌陷方案三：

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

这样做和添加一个div的原理一样，可以达到一个相同的效果，

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

.box1:after {

/*添加一个内容*/

content: "";

/*转换为一个块元素*/

display: block;

/*清除两侧的浮动*/

clear: both;

演示代码为：

演示效果为：

有高度塌陷问题

高度塌陷得到解决：