CSS中浮动float带来的高度塌陷问题解决方案

1、每个盒子设定固定的width和height,这个方法是最简单的。

.father{
　　height:200px;
　　weight:200px;
}

2、给外部的父级元素页添加浮动

.father{
　　float:left;
}

3、给父级元素添加overflow属性

其中用到了overflow的hidden、auto、scroll值

• hidden：溢出隐藏
• auto：当文字溢出时会产生滚动条
• scroll：滚动条无论是否溢出都会显示，很不美观

.father{
　　overflow:hidden;
}
或
.father{
　　overflow:auto;
}
或
.father{
　　overflow:scroll;
}

4 在父元素的最下面添加一个元素并设置clear:both样式

<div class="d1">父盒子
<div class="d2">子盒子</div>
<div class="clear"></div> <!--清除浮动块-->
</div>

.clear{
        clear:both;      
}

 

.5 用伪元素after清除浮动

在塌陷的父级元素设置

  .box01::after{
            content: "";  
            display: block;
            clear: both;
            visibility: hidden;
       } 

这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用！