外边距的折叠

落日映苍穹つ 2023-10-06 22:09 20阅读 0赞

### 外边距的折叠 ###

父子之间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

### 外边距折叠的解决方案 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>外边距解决问题</title>
        <style type="text/css">
            .box1 {
          
                width: 200px;
                height: 200px;
                background-color: aquamarine
            }
           
            .box2 {
          
                width: 100px;
                height: 100px;
                background-color: bisque;
                margin-top: 100px;
            }
            /* learfix 这个样式可以同时解决高度塌陷外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可*/
            .clearfix::before,
            .clearfix::after {
          
                content: "";
                display: table;
                clear: both;
            }
        </style>
    </head>
    
    <body>
        <div class="box1 clearfix">
            <div class="box2"></div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021051121095668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021051121132913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70