CSS清除浮动影响的方法

.parent{
  /* 具体使用哪个要看界面设计的情况 */
  /* overflow: hidden; */
  /* display:inline-block; */
  /* position:absolute; */
  float:left;
} 

原理：利用BFC可以包含浮动这一特性来清除浮动

关于BFC

(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干（BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 ）。

BFC布局规则

        1.浮动的元素会被父级计算高度（父级触发了BFC）

        2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC，BFC的区域不会与float box重叠）

        3.margin不会传递给父级（父级触发了BFC）

        4.属于同一个BFC的两个相邻Box的两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

普通文档流布局规则

        1.浮动的元素是不会被父级计算高度

        2.非浮动元素会覆盖浮动元素的位置

        3.margin会传递给父级

        4.两个相邻元素上下margin会重叠

参考：为什么"overflow:hidden"能清除浮动的影响 - 简书我们都知道"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。然...https://www.jianshu.com/p/7e04ed3f4bea