CSS规则"clear: both"有什么作用?

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>  
        <h1>clear:both;</h1>  
        <div><pre>Hello</pre></div>  
        <p>这是一个测试文字!这是一个测试文字!这是一个测试文字!这是一个测试文字!这是一个测试文字!这是一个测试文字!</p>  
        <p class="demo">这是一个测试文字!</P>  
    </body>  
</html>

效果图:

b50ecdb1e032ef6fad4fc6a627d3f61.png

浏览器支持:

● Google Chrome

● Internet Explorer

● Firefox

● Opera

● Safari

以上就是CSS规则"clear: both"有什么作用?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏