clear属性用来指定的浮动元件不允许浮动该哪一侧；它设置或返回元素相对于浮动对象的位置。而"clear: both"用于设置在左右两侧均不允许浮动元素。

当不需要与指定元素相关的任何元素在左右浮动，并且仅在下面显示时，就可以使用该"clear: both"规则。该规则还表明没有其他元素占用左右两边的空间。

语法：

clear:both;

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>  
            div {  
                width:100px;  
                height:100px;  
                background-color:green;  
                color:white;  
                font-weight:bold;  
                font-size:25px;  
                text-align:center;  
                float: left;  
                padding:15px;  
            }  
            p.demo {  
                clear: both;  
            }  
            h1 {  
                color:green;  
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        clear:both;  
        <div><pre>Hello</pre></div>  
        <p>这是一个测试文字！这是一个测试文字！这是一个测试文字！这是一个测试文字！这是一个测试文字！这是一个测试文字！</p>  
        <p class="demo">这是一个测试文字！</P>  
    </body>  
</html>

效果图：

浏览器支持：