CSS高度塌陷问题

一、float塌陷

1.介绍

浮动简介
CSS浮动是指浮动元素会脱离“文档流并向左或右浮动，
允许文本和行内元素环绕它，直到碰到父元素或者另一个浮动元素。

我们都知道在一个div模型中设置一个嵌套时，当父元素未指定高度，它的高度将由子元素“撑开”。
当父元素未设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。
下面给出示例代码：

<div class="d1">父盒子
	<div class="d2">子盒子</div>
</div>

<style>
        .d1{
            background-color: chartreuse;
            width: 700px;
            height: auto;
        }
        .d2{
            background-color: darkmagenta;
            width: 300px;
            height: 200px;
        }
</style>

给子元素添加float:left;后：

      .d2{
            background-color: darkmagenta;
            width: 300px;
            height: 200px;
            float: left;
        }

出现高度塌陷：

2.解决方法

2.1 给父盒子设置高度

简单直接，一个height:*px搞定。缺点是高度写死，窗口无法自适应。

2.2 父盒子浮动

2.3 触发BFC清除浮动(父盒子添加overflow属性)

• overflow:auto; 有可能出现滚动条，影响美观。
• overflow:hidden; 可能会带来内容不可见的问题。

2.4 清除浮动

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

• 缺点：引入了不必要的冗余元素 。

2.5 用after伪元素清除浮动(推荐)

伪元素after的作用是在元素之后添加一个子元素，但是这个元素并不会存在于DOM中，因此被称为伪元素。其实伪元素法和额外标签法的原理一样，都是通过在浮动元素父级的末尾添加一个空的元素来撑开父级元素的高度，使得浮动元素依然能包裹在父级盒子中，达到清除浮动的效果，只不过区别在于额外标签法添加的是一个真实的元素，而伪元素法添加的是伪元素。定义clearfix类的after伪元素如下：

   .content:after{content: "";  <!--content指你写的父元素-->
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }