css清除浮动，自动撑大外层盒子（实用、赞）

╰+攻爆jí腚メ 2023-05-21 15:16 2阅读 0赞

原文出处：[https://blog.csdn.net/samcphp/article/details/79691189?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522158710422819725211946450%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=158710422819725211946450&biz\_id=0&utm\_source=distribute.pc\_search\_result.none-task-blog-2~blog~first\_rank\_v2~rank\_v25-3][https_blog.csdn.net_samcphp_article_details_79691189_ops_request_misc_257B_2522request_255Fid_2522_253A_2522158710422819725211946450_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_158710422819725211946450_biz_id_0_utm_source_distribute.pc_search_result.none-task-blog-2_blog_first_rank_v2_rank_v25-3]  
  
延伸阅读：[DIV设置浮动后无法撑开外部DIV的解决办法][DIV_DIV]  
  
先上效果图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]  
代码：

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>css清除浮动，自动撑大外层盒子</title>
        <style>
            .box {
                width: 960px;
                margin: 0 auto;
                background: green;
            }
    
            .left {
                width: 200px;
                height: 600px;
                float: left;
                background: red;
            }
    
            .right {
                width: 750px;
                height: 600px;
                float: right;
                background: blue
            }
    
            /*.clear {
                -ms-zoom: 1;
            }*/
    
            /*清除浮动，才能撑大容器*/
            .clear:after {
                content: '';
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box clear">
            <div class='left'></div>
            <div class='right'></div>
        </div>
    </body>
    </html>

注意：  
       不仅仅子元素浮动会出现这种情况，其实子元素如果用position脱离文档流布局也会出现这种情况，但不能通过清浮动来解决。  
       谨记！谨记！

[https_blog.csdn.net_samcphp_article_details_79691189_ops_request_misc_257B_2522request_255Fid_2522_253A_2522158710422819725211946450_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_158710422819725211946450_biz_id_0_utm_source_distribute.pc_search_result.none-task-blog-2_blog_first_rank_v2_rank_v25-3]: https://blog.csdn.net/samcphp/article/details/79691189?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158710422819725211946450%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158710422819725211946450&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-3
[DIV_DIV]: https://www.jb51.net/css/35568.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20230521/ba9e62aa60854a4eb982aaeefd013743.png