清除浮动的七种方法与原理

清除浮动的七种方法与原理

清除浮动的七种方法

• 1.1.给父级div定义伪类：after和zoom
• 1.2 父级div定义overflow:hidden
• 1.3 在浮动尾部添加空div标签 clear:both
• 1.4 父级div定义 overflow:auto
• 1.5 父级div定义为表格 display:table
• 1.6 给父级div定义一个height
• 1.7加br标签

方法的原理

• 1.1.1 给父级div定义伪类：after和zoom
  zoom: 1; 作用：可以在子节点float的时候撑开父节点。 整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。

• 1.2.1 父级div定义overflow:hidden
  激发 BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。

  原文链接：https://blog.csdn.net/always_die0/article/details/108296195（转载自）

• 1.3.1 在浮动尾部添加空div标签 clear:both
  clear:both 不允许元素的左边或右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边 添加足够的清除空间。

• 1.4.1 父级div定义 overflow:auto
  激发BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:auto；样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。
  原文链接：https://blog.csdn.net/always_die0/article/details/108296195（转载自）

• 1.5 .1父级div定义为表格 display:table
  在这里display:table;和display:block;的作用和效果都是一样的。 display:block;是让after变成块级元素,避免和上面重叠。 而display:table会触发bfc效果，避免内部浮动元素不会到处乱跑（这就是清除浮动的目的）

• 1.6.1 给父级div定义一个height
  给父元素设置宽高以至于不受子元素浮动影响而塌陷

• 1.7.1 加br标签
  br标签存在一个属性：clear。 这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。 即能清除掉浮动。