使用float浮动以后，父元素“塌陷”的解决办法

时间 2019-11-06

原文原文链接

经常在并排div的时候使用到float属性，可是使用以后会发现他们的父元素会没有高度，以后的元素会“挤上来”，形成“塌陷”。html

好比，咱们想要的以下效果：spa

代码以下：code

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>

 .father-div{
            background-color: #000000;
 }
        .items{
            margin: 10px;
 float: left;
 height: 100px;
 background-color: #FF0000;
 }
        .next-div{
            background-color: #0099FF;
 height: 100px;
 }
    </style>
    <body>
        <div class="father-div">
            <div class="items">第一个</div>
            <div class="items">第二个</div>
            <div class="items">第三个</div>
        </div>
        <div class="next-div">next-div</div>
    </body>
</html>

却发现实际运行效果是这样的：htm

能够看到，father-div本应该包裹三个items，可是它的高度却消失了。it

出现这种状况的时候，咱们能够经过以下几种方法来解决：class

在father-div里加入height属性，该方法适用于子元素高度已知而且固定的状况。
meta
在最后一个子元素后加入<div style="clear:both;"></div>，清除浮动元素。float
在father-div里加入overflow:hidden属性。方法

这里推荐后两种方法。im