div清除浮动css样式代码分享(4种方法)

这里为大家介绍一下“div清除浮动CSS样式代码分享（4种方法）”。

什么是浮动

在css中，浮动是指让一个元素脱离标准流，靠近另一个元素显示的一种布局方式。浮动可以使元素分布在页面上，让页面更加美观。

什么是浮动清除

当一个元素浮动时，它的父元素不会自适应其高度，导致父元素的高度为0，这就是浮动导致的布局问题。

浮动清除就是一种解决浮动导致的布局问题的方式，它可以让父元素自适应其子元素的高度。

4种清除浮动的方式

以下是4种清除浮动的方式，并且每个方式都提供了示例说明。

1. 使用空元素清理浮动

在清除浮动时，我们可以在浮动元素的父元素末尾添加一个空的div元素，并设置clear属性为both。这样就可以清除浮动了。

示例：

<style>
    .float-left {
        float: left;
        width: 50%;
    }
    .float-right {
        float: right;
        width: 50%;
    }
    .clear-float {
        clear: both;
    }
</style>

<div class="float-left">左边浮动元素</div>
<div class="float-right">右边浮动元素</div>
<div class="clear-float"></div>

2. 使用父元素overflow属性清理浮动

给浮动元素的父元素添加overflow属性，可以让父元素自适应子元素高度，从而清除浮动。

示例：

<style>
    .float-left {
        float: left;
        width: 50%;
    }
    .float-right {
        float: right;
        width: 50%;
    }
    .clear-float {
        overflow: hidden;
    }
</style>

<div class="clear-float">
    <div class="float-left">左边浮动元素</div>
    <div class="float-right">右边浮动元素</div>
</div>

3. 使用父元素伪类清理浮动

使用父元素的伪类after清除浮动也是一种常见的方式。需要设置伪类的content为""，display属性为block，并清除float。

示例：

<style>
    .float-left {
        float: left;
        width: 50%;
    }
    .float-right {
        float: right;
        width: 50%;
    }
    .clear-float:after {
        content: "";
        display: block;
        clear: both;
    }
</style>

<div class="clear-float">
    <div class="float-left">左边浮动元素</div>
    <div class="float-right">右边浮动元素</div>
</div>

4. 使用父元素flex布局清理浮动

使用父元素的flex布局可以很方便地解决浮动问题。需要设置父元素的display属性为flex，并设置flex-wrap为wrap。

示例：

<style>
    .float-left {
        float: left;
        width: 50%;
    }
    .float-right {
        float: right;
        width: 50%;
    }
    .clear-float {
        display: flex;
        flex-wrap: wrap;
    }
</style>

<div class="clear-float">
    <div class="float-left">左边浮动元素</div>
    <div class="float-right">右边浮动元素</div>
</div>

总结

以上是四种常见的清除浮动的方法。无论采用哪种方法，都可以有效地解决浮动导致的布局问题。