高度塌陷和外边距折叠的完美解决代码 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高度塌陷和外边距折叠的完美解决代码</title>
        <style>
            .box1{
                border: 1px red solid;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: #ff0;
                float: left;
            }
            
            .box3{
                width: 300px;
                height: 300px;
                background-color: orange;
                /* clear: both; */
            }
            
            .clearfix{
                content: '';
                display: table;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box1 clearfix">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
        
    </body>
</html>

 

posted @ 2022-05-12 10:13  氯丙嗪  阅读(11)  评论(0)    收藏  举报