产生原因：
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。
造成后果：
父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。
方案一：开启父元素的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;
}
网友评论