CSS清除浮动最好方法

CSS清除浮动最好方法

• 在父级上加上clearfix

• .clearfix::before, .clearfix::after{ content:''; display:table; clear:both; }·

• 浮动问题：

  1. float或者position脱离文档流，父级没有高度，父级塌陷。

• 外边距重叠问题：

  1. 父盒子外边距直接接触的时候，子盒子设置margin，父盒子会跟着动
  2. 上下两个盒子，同时有上下margin的时候，同为正，取大的那个值，同为负值，取绝对值大的那个值，一正一负取相加的值

• 这个方法的好处：

  1. 解决相邻外边距重叠问题
  2. 解决浮动问题

• 解决原因：

  1. 解决外边距重叠：display:table让两个盒子不相连
  2. 解决浮动：clear：both清除两边浮动

• 其余方法：

  1. 父级加overflow:hidden