CSS clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

语法

clear: none | left | right | both | inherit;

• none：默认值。允许元素两侧都可以有浮动元素。
• left：不允许元素左侧有浮动元素。
• right：不允许元素右侧有浮动元素。
• both：不允许元素两侧有浮动元素。
• inherit：从父元素继承 clear 属性的值。

适用性

clear 属性适用于块级元素。

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<style>
    .float-left {
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    .float-right {
        float: right;
        width: 50px;
        height: 50px;
        background-color: blue;
    }
    .clear-both {
        clear: both;
    }
</style>
</head>
<body>

<div class="float-left"></div>
<div class="float-right"></div>
<div class="clear-both"></div>

</body>
</html>

在上面的示例中，我们创建了两个浮动元素，一个向左浮动，一个向右浮动。然后我们在第三个 div 元素中使用 clear: both;，这样可以确保该元素不会被浮动元素覆盖，而会出现在它们下方。