我们先看一段测试代码：

<html>
    <head>
        <title></title>    
        <style>
            .aBox{
                background-color:blue;
                
            }
            .bBox{
                background-color:yellow;
                float:left;
                height:400px;
                width:400px;
            }
        </style>
    </head>
    <body>
        <div class="aBox">
            <div class="bBox"></div>
        </div>    
    </body>
</html>

效果图：

请输入图片描述

从上面的代码来看，包含一个父div和一个子div。而子div又有高度，但是审查元素时，却发现该父div却没有高度（所以此时父div的背景色蓝色也没有显示出来）。这是为什么呢？

当一个元素只包含浮动元素的时候，它会出现高度折叠,即元素的上下底边重合，和高度为0效果一样。

aBox的所有div加上了浮动属性。在显示器的侧面，bBox这个div已经脱离了aBox这个div，也就是说，此时的bBox的宽高是多少，对于已经脱离了的aBox来说，都是不起作用的。

解决方法：

利用overflow:hidden属性

给父元素添加 overflow:hidden 属性

添加一个空div

<div class="aBox">
        <div class="bBox"></div>
        <div></div>
</div>

这种方法是添加一个空的div，这个div和浮动元素同一级别，且位于浮动元素的最后。它在这里并不具有实际意义，它的作用只是撑开div标签而已。

利用伪元素:after

.aBox:after{
        background-color:blue;
        float:left;
        content:"";
        display: block;
        clear: both; 
    }

在:after为元素里面用到了content属性，这样这条样式的意思是在class为aBox的div元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除div的高度折叠，并不让它显示出来。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。

文章版权归作者所有，未经允许请勿转载。

THE END