CSS浮动塌陷问题

问题描述：当我们给子元素设置了浮动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>

最后编辑于：2017.12.12 15:12:34