css清除浮动的方法

• 为什么要清除浮动？？
  因为浮动元素不占据标准流的位置了，所有它会对后面元素的排版产生问题。为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响。

• **首先最简单的方法，就是给父元素设置高度！！**但是实际开发中，有很多情况子元素的高度是不固定的，因此不能去给父元素设置固定高度，而是要靠子元素内容的高度去撑开父元素。

• 那么我们就用css里的clear属性来清除浮动，一共有4种可以采用的方法：
  1.额外标签法：通过在最后一个浮动元素末尾添加一个空的标签例如

  ，或则其他标签br等亦可。
  弊端❗️ 添加许多无意义的标签，结构化较差

  2.父级添加overflow属性方法：可以通过触发BFC的方式，可以实现清除浮动效果。可以给父级（亲爹）添加： overflow为 hidden| auto| scroll 都可以实现。
  弊端❗️会将子元素溢出父元素的部分自动隐藏掉
  3.使用after伪元素清除浮动：伪元素可以当作行内元素对待。
  使用方法： .clearfix:after {
  content: “”；
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
  .clearfix {zoom: 1;} / IE6、7 专有 */
  ⚠️content:"“ 必须写，否则不生效
  给浮动元素的父元素(亲爹)使用
  4.使用before和after双伪元素清除浮动使用方法：
  .clearfix:before,.clearfix:after {
  content:"";
  display:table;
  }
  .clearfix:after {
  clear:both;
  }
  .clearfix {
  *zoom:1;
  }
  ⚠️：给浮动元素的父元素（亲爹）使用

注意，其中除了第一种方法可以清除元素自身的浮动，2/3/4都是不能清除自身的浮动，而是清除直接下一级子元素的浮动，亲儿子亲儿子的浮动

?总得来说呢，优先考虑给父元素设置高度，如果不行的话，尽量使用伪元素清除浮动。