关于css中清除浮动的方法总结

1.为什么要清除浮动？

如果父元素没有高度，子元素浮动会发生高度塌陷，通过清除浮动可以让子元素撑起父元素高度

2.清除浮动的方法

1.创建bfc
  /* .three{
        background-color: seagreen;
        overflow: hidden;
        border: 10px solid blue; 
      }
      .four{
        background-color: red;
        height: 50px;
        width: 10px;
        float: left;
      } */
<!-- <section>
    <div class="three">
    <div class="four"></div>
    </div>
  </section> -->

2.在父容器末尾添加<div class='clear'></div>
.clear{
    clear:both
}
缺点：会改变html结构

3.父容器添加clearfix
   <section>
     <div class="container clearfix">
      <div class="left"></div>
      <div class="right"></div>
     </div>
   </section>
.left{
      float: left;
      height: 100px;
      width: 100px;
      border: 1px solid slateblue;
    }
    .right{
      float: left;
      height: 100px;
      width: 100px;
      border: 1px solid skyblue;
    }
    .container{
      border: 1px solid red;
    }
//核心代码
    .clearfix::after{
      content: '.';
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
    }