当前位置: 首页>>代码示例>>用法及示例精选>>正文


CSS clear属性用法及代码示例

clear属性用于指定不允许浮动元素的哪一侧浮动。它设置或返回元素相对于浮动对象的位置。如果该元素可以水平放置在浮动的另一个元素旁边的空间中,则它将。

用法:

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

属性值:

  • none:它具有默认值。它允许元素在两侧浮动。

    用法:

    clear:none;

    例:



    <!DOCTYPE html> 
    <html> 
        <head> 
            <style> 
                div { 
                    width:100px; 
                    height:100px; 
                    background-color:green; 
                    color:white; 
                    font-weight:bold; 
                    font-style;itallic; 
                    font-size:25px; 
                    text-align:center; 
                    float:left; 
                    padding:15px; 
                } 
                p.GFG { 
                    clear:none; 
                } 
                h1, h2 { 
                    color:green; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksForGeeks</h1> 
            <h1>clear:none;</h1> 
            <div><pre>GFG</pre></div> 
            <p> 
              GeeksforGeeks:
              A computer science portal for geeks 
            </p> 
            <p class="GFG">GeeksforGeeks</P> 
        </body> 
    </html>                                        

    输出:

  • left:此属性指定相对于其他元素,不允许元素在左侧浮动。

    用法:

    clear:left;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <style> 
                div { 
                    width:100px; 
                    height:100px; 
                    background-color:green; 
                    color:white; 
                    font-weight:bold; 
                    font-style;itallic; 
                    font-size:25px; 
                    text-align:center; 
                    float:left; 
                    padding:15px; 
                } 
                p.GFG { 
                    clear:left; 
                } 
                h1, h2 { 
                    color:green; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksForGeeks</h1> 
            <h1>clear:left;</h1> 
            <div><pre>GFG</pre></div> 
            <p> 
              GeeksforGeeks:
              A computer science portal for geeks 
            </p>         
            <p class="GFG">GeeksforGeeks</P> 
        </body> 
    </html>                    

    输出:

  • right:这意味着元素不允许在右侧浮动。

    用法:

    clear:right;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <style> 
                div { 
                    width:100px; 
                    height:100px; 
                    background-color:green; 
                    color:white; 
                    font-weight:bold; 
                    font-style;itallic; 
                    font-size:25px; 
                    text-align:center; 
                    float:left; 
                    padding:15px; 
                } 
                p.GFG { 
                    clear:right; 
                } 
                h1, h2 { 
                    color:green; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksForGeeks</h1> 
            <h1>clear:right;</h1> 
            <div><pre>GFG</pre></div> 
            <p> 
              GeeksforGeeks:
              A computer science portal for geeks 
            </p> 
            <p class="GFG">GeeksforGeeks</P> 
        </body> 
    </html>                    

    输出:

  • both:这意味着浮动元素不允许在两侧浮动。

    用法:

    clear:both;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <style> 
                div { 
                    width:100px; 
                    height:100px; 
                    background-color:green; 
                    color:white; 
                    font-weight:bold; 
                    font-style;itallic; 
                    font-size:25px; 
                    text-align:center; 
                    float:left; 
                    padding:15px; 
                } 
                p.GFG { 
                    clear:both; 
                } 
                h1, h2 { 
                    color:green; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksForGeeks</h1> 
            <h1>clear:both;</h1> 
            <div><pre>GFG</pre></div> 
            <p> 
              GeeksforGeeks:
              A computer science portal for geeks 
            </p> 
            <p class="GFG">GeeksforGeeks</P> 
        </body> 
    </html>                    

    输出:

  • initial:它将属性设置为其默认值。
    用法:
    clear:initial;

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <style> 
                div { 
                    width:100px; 
                    height:100px; 
                    background-color:green; 
                    color:white; 
                    font-weight:bold; 
                    font-style;itallic; 
                    font-size:25px; 
                    text-align:center; 
                    float:left; 
                    padding:15px; 
                } 
                p.GFG { 
                    clear:initial; 
                } 
                h1, h2 { 
                    color:green; 
                    text-align:center; 
                } 
            </style> 
        </head> 
        <body> 
            <h1>GeeksForGeeks</h1> 
            <h1>clear:initial;</h1> 
            <div><pre>GFG</pre></div> 
            <p> 
              GeeksforGeeks:
              A computer science portal for geeks 
            </p> 
            <p class="GFG">GeeksforGeeks</P> 
        </body> 
    </html>                    

    输出:

    支持的浏览器:clear属性支持的浏览器如下:

    • 谷歌浏览器1.0
    • Internet Explorer 5.0
    • Firefox 1.0
    • Opera 6.0
    • Safari 1.0




相关用法

注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 CSS | clear Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。