清除浮动的方法

浮动元素会脱离标准流，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动带来的影响

方法一：额外标记法

  在父元素后面添加一个块级元素，设置css属性 clear:borth

.clearfix {
      clear: both;
    }

方法二：单伪元素法

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

方法三：双伪元素法

 .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    /* after 清除浮动 */
    .clearfix::after {
      clear: both;
    }

方法四：overflow

overflow: hidden;