清除浮动

清除浮动

给父元素固定高度

使用空元素清除浮动

在浮动元素的后面添加一个空元素，并给这个空元素应用 clear 样式。

<div class="container">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
    <div style="clear: both;"></div>
</div>

使用伪元素清除浮动

利用 CSS 的伪元素 ::after 或 ::before，给浮动元素的父元素添加一个空内容，并应用 clear 样式。这是目前推荐的方法之一，因为它不需要修改 HTML 结构。

.container::after {
    content: "";
    display: table;
    clear: both;
}

<div class="container">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
</div>

使用 overflow 属性

给浮动元素的父元素设置 overflow 属性（如 hidden、auto 或 scroll），可以触发 BFC（块格式化上下文），从而包含浮动的子元素。

.container {
    overflow: hidden;
}

<div class="container">
    <div class="float-left">浮动元素1</div>
    <div class="float-left">浮动元素2</div>
</div>

使用 Flexbox 或 Grid 布局

现代 CSS 布局方式如 Flexbox 和 Grid 可以避免浮动带来的问题，因此可以考虑使用这些布局方式来替代浮动。

Flexbox 示例：

.container {
    display: flex;
}

.float-left {
    /* 可以根据需要设置 flex 属性 */
    flex: 1;
}

<div class="container">
    <div class="float-left">元素1</div>
    <div class="float-left">元素2</div>
</div>

Grid 示例：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列布局 */
}

<div class="container">
    <div>元素1</div>
    <div>元素2</div>
</div>

总结

清除浮动有多种方法，每种方法都有其适用场景。对于新项目，推荐使用 Flexbox 或 Grid 布局来避免浮动带来的问题。对于需要兼容旧浏览器的项目，使用伪元素清除浮动或设置 overflow 属性是比较好的选择。