您现在的位置是: 首页 » 网页代码 » CSS规则"clear: both"有什么作用?
网页代码

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

网站优化小编2020年1月13日 90人已围观

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>

效果图:

网站运营中栏目排名优化技巧

浏览器支持:

● Google Chrome

● Internet Explorer

● Firefox

● Opera

● Safari

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:435天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4965 条
  • 文章评论:2964 条
  • 微信公众号:扫描二维码,关注我们