解决高度塌陷问题

1.在高度塌陷的父元素的最后添加一个空白的div,不设置浮动,对其进行清除浮动clear,

2.通过伪类选择器结合after,添加一个内联元素,然后转换为块元素,再清除浮动clear

<style>
     .box1{
         border:solid green 1px;
     }
     .box2{
         width: 200px;
         height: 200px;
         background-color:hotpink;
         float: left;
     }
     .clearfix:after{
         content: "";
        display: block;
        clear: both;
     }
</style>
<body>

    <div class="box1 clearfix">
        <div class="box2">

        </div>

猜你喜欢

转载自www.cnblogs.com/1521681359qqcom/p/12932842.html