怎么解决网页中的高度崩塌的问题

产生原因：

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。

造成后果：

父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。

方案一：开启父元素的BFC

BFC(Block Formatting Context):块级格式化环境

BFC是元素的隐含属性，默认是在关闭状态的,可以通过一些特殊的样式，来开启BFC

开启BFC以后元素将会具有如下特性:

1.父元素的垂直外边距不会与子元素重叠；

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

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

开启BFC的方式:

1.设置元素浮动；

2.设置元素绝对定位；

3.设置元素的类型为inline-block；

4.设置overflow为一个非默认值,一般都是使用overflow:hidden来开启BFC。

方案二：

方式：在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动

    <div id="box1">

            <div id="box2"></div>

            <div style="clear:both"></div>

    </div>

存在问题：使用这种方式会在页面中添加多余的结构

知识点: 清除浮动

概念：有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

none，默认值，不清除浮动

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响

方案三：

使用after伪类，向父元素后添加一个块元素，并对其清除浮动

该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构

方式：

.clearfix:after{

    content:"";

    display:block;

    clear:both;

}

高度塌陷完善：

1.  子标签浮动, 父标签高度崩塌

2. 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠

3. 经过修改后的clearfix是一个多功能的,  既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

.clearfix:before,

.clearfix:after{

            content: '';

            display: table;

            clear: both;

}