清除浮动：浮动元素使得父元素高度塌陷

原因

当元素设置浮动后，会自动脱离文档流，即元素设置浮动后，就不在文档的管辖范围，其父元素的高度就不复存在，会被认为没有内容。

（这里的一般情况是父元素的高度为百分比，但不为绝对定位，且父元素的父元素不能获取到高度）

<style>
    .parent {
        height: 100%;
        background-color: cadetblue;
        border: 1px solid tomato;
    }
    ul {
        list-style-type: none;
        float: left;
    }
</style>
<div class="parent">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Address</a></li>
        </ul>
    </nav>
</div>

效果图：

放大红色部分，会发现红色部分就是父元素，只不过父元素高度为 0。关于 height 设置为百分比的知识：理解 height 百分比

父元素设置 overflow: hidden;

overflow: hidden;

• 隐藏溢出，当元素内容超出父元素时，将溢出部分隐藏，使页面更加美观；
• 清除浮动，当子元素浮动时，按照第一个特性，若子元素内容超出父元素时，会将子元素超出部分裁掉，但是由于子元素有浮动，无法裁剪，只能由父元素增加高度裹住子元素，这时候父元素有了高度，并且是根据子元素自适应的高度。

.parent {
    height: 100%;
    background-color: cadetblue;
    border: 1px solid tomato;
    overflow: hidden;
}

父元素内部设置 <div> 空标签并设置 clear: both;

<style>
    .parent {
        height: 100%;
        background-color: cadetblue;
        border: 1px solid tomato;
    }
    ul {
        list-style-type: none;
        float: left;
    }
</style>
<div class="parent">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Address</a></li>
        </ul>
    </nav>
    <div style="clear: both;"></div>
</div>

效果同上，但是空标签无意义，不建议使用。

父元素添加伪元素 ::after 清除浮动

.parent::after {
    content: '';
    clear: both; /* 清除浮动 */
    display: block; /* 确保该元素是一个块级元素 */
}

效果同上，相当于在父元素内部后面加了空标签

给父元素也设置 float （不稳定）

让父元素与子元素一起脱离文档流浮动，确保子元素在父元素内，这样父元素能够自适应子元素的高度

.parent {
    height: 100%;
    width: 100%;
    // 要给 float 元素添加 width 属性，才会浮动。
    background-color: cadetblue;
    border: 1px solid tomato;
    float: left;
}

效果同上，但是一定会影响父元素之后的排列，影响布局，不建议使用。

给父元素设置具体高度像素值

.parent {
    height: 100px;
    background-color: cadetblue;
    border: 1px solid tomato;
}

效果如下：

没有实现自适应，不美观。

参考：关于浮动元素float使其父元素高度塌陷的原因及解决方法