• 技术文章 >web前端 >css教程

    css clear属性怎么用

    青灯夜游青灯夜游2019-05-28 16:38:02原创1481
    css clear属性指定元素的左侧或右侧上不允许出现浮动元素。可用于实现浮动的清除,解决浮动布局带来的一些问题。

    css clear属性怎么用?

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

    语法:

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

    属性值:

    ● left:在左侧不允许浮动元素。

    ● right:在右侧不允许浮动元素。

    ● both:在左右两侧均不允许浮动元素。

    ● none:默认值。允许浮动元素出现在两侧。

    ● inherit:规定应该从父元素继承 clear 属性的值。

    说明:

    clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。

    不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

    注释:所有主流浏览器都支持 clear 属性。任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    css clear属性 示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    img
    {
    float:left;
    }
    p.clear
    {
    clear:both;
    }
    </style>
    </head>
    <body>
    <img src="logocss.gif" width="95" height="84" />
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
    <p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
    <br>
    <p>使用clear:both清除浮动:</p>
    <img src="logocss.gif" width="95" height="84" />
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
    <p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. </p>
    </body>
    </html>

    效果图:

    1.jpg

    以上就是css clear属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css clear属性
    上一篇:css justify-content属性怎么用 下一篇:css box-orient属性怎么用
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css怎么改变div的位置• css文字居中怎么打• 怎么将html与css分开• css max-height属性怎么用
    1/1

    PHP中文网