clear 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>clear</title>
        <style>
            .box1{
                width: 100px;
                height: 100px;
                background-color: #bfa;
                float: left;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: #ff0;
                float: right;
            }
            
            .box3{
                width: 300px;
                height: 300px;
                background-color: orange;
                /* 
                    clear
                        用来清除浮动元素对当前元素的影响
                        可选值
                            none默认值，不清除
                            left清除左侧浮动对当前元素的影响
                            right清除右侧浮动对当前元素的影响
                            both清除两侧中对当前元素影响最大的那一侧
                 */
                clear: right;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

 

posted @ 2022-05-12 09:45  氯丙嗪  阅读(31)  评论(0)    收藏  举报