清除浮动方法

<div class="box">
    <div class="main"></div>
</div>
.box {
    width: 500px;
    background-color: aliceblue;
    border: 1px solid #000;
 }
.main {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}

父元素高度塌陷了！可以给父元素加height解决塌陷，但是不知道高度情况有以下方法解决：

1.在浮动元素后加空标签清除浮动

<div class="box">
    <div class="main"></div>
    <!-- 增加一个空标签 -->
    <div class="next"></div>
</div>
.box {
    width: 500px;
    background-color: aliceblue;
    border: 1px solid #000;
 }
.main {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.next {
    clear: both;
  }

2.父元素使用overflow属性

.box {
    width: 500px;
    background-color: aliceblue;
    border: 1px solid #000;
    overflow: hidden;
  }
  .main {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
  }

3.父元素使用after伪对象清除浮动

.box {
    width: 500px;
    background-color: aliceblue;
    border: 1px solid #000;
    overflow: hidden;
  }
  .main {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
  }
  .box::after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }