问题描述：当我们给子元素设置了浮动float:left或float:right或两者，但是没有给父元素设置高度时，就会出现父元素高度塌陷问题
浮动塌陷会导致:
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或> CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，> 产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正> > 确表达。特别是上下边的padding和margin不能正确显示。
举个例子，做一个如下浮动的效果：
屏幕快照 2017-12-12 14.20.04.png
html代码如下：
<div class="reportList">
<view class="item unSelected" >雨伞撑破</view>
<view class="item unSelected" >密码错误</view>
<view class="item unSelected" >密码缺失</view>
<view class="item selected" >其他原因</view>
</div>
CSS代码如下：
*{
margin: 0px;
padding: 0px;
color: #424242;
font-family: arial;
}
.reportList{
border-bottom: 1px solid #888888;
margin:10px;
}
.reportList .item{
float: left;
width: 40%;
height: 80px;
line-height: 80px;
margin: 10px;
text-align: center;
border-radius: 8px;
}
.selected{
color: white;
background-color:#00CDCD;
}
.unSelected{
color: #888888;
background-color: #F4F5F6;
}
子元素都设置了float属性，父元素div高度不能撑开，样式margin属性显示有问题,运行效果如下 ：
屏幕快照 2017-12-12 14.43.43.png
解决浮动塌陷有很多方案，就不一一列举，给出最完美的解决方案，使用CSS的:after伪元素清除(:after,注意：作用于浮动元素的父亲）
给浮动元素的容器添加一个clearfix的class
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
display:block;/*将文本转为块级元素*/
clear:both;/*清除浮动*/
}
.clearfix{
zoom:1;/*为了兼容IE*/
}
其他解决方案：
一：使用带有clear属性的空元素；
在浮动元素的盒子最后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
不推荐使用。这个方法添加了大量无语义的html元素，造成结构的混乱
.clear{clear: both;}
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>
二：使用CSS的overflow属性处理
在清理浮动前，浮动的元素跳离了box层，自己跑到上层去了。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属
性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。
.over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<body>
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>
网友评论