css： 盒子高度坍塌的解决

高度坍塌：常见于流式布局中。当父元素没有高度时， 且子元素有float样式。

原因： 子元素脱离文档流， 无法撑开父元素。

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
<script>
</script>
<style>
    .box {
        width: 500px;
        background-color: rgb(216, 143, 143);
    }
    
    .box1 {
        height: 100px;
        width: 100px;
        background-color: rgb(159, 186, 211);
        float: left;
        zoom: 1;
    }
    
  
</style>

效果： 

 

 解决： 在坍塌的盒子上增加样式

  .box:after {
        clear: both;
        content: '';
        display: block;
        height: 0;
        overflow: hidden;
    }

 

父元素成功呈现出来。 

 

 

版权声明：本文为LiliGong1原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。