HTML-完美解決父子元素的外邊距重疊和高度塌陷問題

本文轉載自查看原文 2019-10-25 15:32 449 html5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin:0px; padding:0px;}
            .box1{
                width: 300px;
                height: 300px;
                background-color: red
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
            margin-top: 100px;
            }
    
        </style>
    </head>
    <body>
        
        
        <div class="box1 ">
            
            <div class="box2"></div>
        </div>
        
    </body>
</html>

當把子元素margin-top:100 時，其父元素會跟着一樣改變

解決方法

用css解決

.clearfix:before,
            .clearfix:after{
                content: "";
                display: table;
                clear: both;
            }
            
            .clearfix{
                zoom: 1;
            }

形成以下完全代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin:0px; padding:0px;}
            .box1{
                width: 300px;
                height: 300px;
                background-color: red
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                margin-top: 100px;
            }
            .clearfix:before,
            .clearfix:after{
                content: "";
                display: table;
                clear: both;
            }
            
            .clearfix{
                zoom: 1;
            }
    
        </style>
    </head>
    <body>
        
        
        <div class="box1  clearfix">
            
            <div class="box2"></div>
        </div>
        
    </body>
</html>

運行后變成

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 外邊距塌陷如何解決？ margin屬性以及垂直外邊距重疊問題 [CSS]解決父子元素margin-top重疊問題 margin外邊距合並問題以及解決方式如何解決浮動元素高度塌陷---CSS CSS 外邊距(margin)重疊及防止方法行內元素的內外邊距關於css中外邊距（margin）出現重疊的狀況及解決方法高度塌陷問題以及如何解決高度坍塌問題 float浮動后，父級元素高度塌陷和遮蓋問題