cssclear清除浮动

CSS Clear 清除浮动

基础概念

CSS clear 属性用于控制元素如何处理周围的浮动元素。当一个元素设置了 float 属性后，它会脱离正常的文档流，并向左或向右浮动。这可能会导致其后面的元素也跟随浮动，从而影响页面布局。clear 属性就是用来解决这个问题的。

类型

clear 属性有以下几种取值：

none：默认值，不清除浮动。
left：清除左侧的浮动元素。
right：清除右侧的浮动元素。
both：清除左右两侧的浮动元素。

应用场景

浮动元素后的块级元素：当一个块级元素紧跟在一个浮动元素后面时，可能会被浮动元素影响，导致布局混乱。此时可以使用 clear 属性来清除浮动。
多列布局：在多列布局中，如果某一列使用了浮动，为了避免其他列受到影响，可以使用 clear 属性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Clear Example</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid black;
        }
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="float-left"></div>
        <div class="float-left"></div>
        <div class="clear"></div>
        <div class="normal-block">
            This is a normal block element that should not be affected by the floating elements above.
        </div>
    </div>
</body>
</html>