web页面css高度塌陷及解决办法

        本篇博文旨在记录做网页时因为CSS高度塌陷导致页面元素显示异常的情况，并记录了解决方法，能为下次遇到该问题时提供指导意见。

 一、浮动

        在做web网页时，为了使得多个块级元素在一行内从左到右依次排列，需要用到浮动定位。float的属性为left或right。但是浮动元素会脱离文档流，导致其不占据页面空间，会对父元素高度带来一定影响。如果一个元素中包含的子元素全部是浮动元素，那么该元素高度将变成0（CSS高度塌陷）。

 二、浮动的效果及影响

1. 浮动定位元素会被排除在文档流之外，即脱离文档流(不占据页面空间)，其余的元素要上前补位。
2. 浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 。
3. 浮动元素依然位于父元素之内。
4. 浮动元素处理的问题—解决多个块级元素在一行内显示的问题。

 三、清除浮动影响的解决办法

        较为普遍的经典解决办法：单伪元素after清除浮动影响（开启元素的BFC）。

        即在被带来浮动影响的父元素上新增一个clearfix类名，然后添加如下CSS代码：

.clearfix::after {
  content: "";/* 生成内容为空 */
  height: 0;/* 伪元素高度为0，不影响其他元素 */
  font-size: 0;/* 伪元素字体大小为0 */
  display: block;/* 生成的元素以块级元素显示 */
  clear: both;/* 清除前面元素浮动带来的影响 */
  visibility: hidden;/* 设为不可见 */
}

.clearfix {
  zoom: 1;/* ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持 */
}

 四、清除浮动的示例

 4.1 页面元素结构 

         类名为span1、upload、recognition、result、correct的浮动类型均为float:left，浮动导致其父元素即类名为row和pageheader的背景图片高度塌陷，造成显示不完整。

4.2 清除浮动前页面效果

4.3 清除浮动后页面效果

4.4 清除浮动效果添加的CSS代码

/* row外部有一个类名为pageheader的div容器,内部有一个类名为whitebg的div容器， */
/* 且类名为span1的div容器设置了float:left浮动样式,外部类名为pageheader的div容器因为内部没有clear，导致不能撑开。 */
/* 清除浮动效果，不破坏文档结构，没有副作用。 */
.clearfix::after {
  content: "";/* 生成内容为空 */
  height: 0;/* 伪元素高度为0，不影响其他元素 */
  font-size: 0;/* 伪元素字体大小为0 */
  display: block;/* 生成的元素以块级元素显示 */
  clear: both;/* 清除前面元素浮动带来的影响 */
  visibility: hidden;/* 设为不可见 */
}

  /* ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持 */
.clearfix {
  zoom: 1;
}