浮动带来的影响和清除浮动

清除浮动

浮动的特点与作用

文档流：所有的内容都是占位的，正常情况下：
块元素：上下显示，独占一行
内联元素：水平排列，左右显示
浮动改变块元素的排列方式，让内容从上下排显示成水平显示。
** float的属性值**：
left 左浮动
right 右浮动
none 不浮动
注意：
浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠；
如果想要内容都水平排列，需要所有的盒子都设置浮动
如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示
浮动不占位的副作用只会同级之间产生，浮动的副作用都是往下影响，不会影响上边的盒子

**浮动的影响**

元素类型受浮动的影响
（不占位，脱离文档流）
块元素：
元素不设置宽，宽度是父元素的宽，如果设置浮动，块元素的宽度由内容撑开
内联元素
可以设置宽高
margin和padding可以设置四个方向
空格的间隙也能取消

高度塌陷
首先要了解什么是高度塌陷，以及产生高度塌陷的原因:
如果父元素不设置高，或者设置最小高，高度由内容撑开，一旦内容浮动后哦不占位，就会出现高度塌陷，图下是由于没设置父元素的高度，高度由内容撑开，一旦发生浮动，就会产生塌陷现象：

解决高度塌陷的方法：
1.给父元素添加overflow:hidden（overflow可以触发BFC,关于BFC,可以理解为这是一个独立的渲染区域，在这个区域里面，浮动元素参与高度计算）
2.可以在浮动的下边设置一个空盒子，给空盒子清除浮动，把父元素撑开，需要注意的是，这个盒子必须是块元素，不是的话需要转换display:block；

万能清除法 .clearfix，这个用到了一种伪类,::after，该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构，在图框框里面设置的是为了防止在content里面添加内容，设置了默认高度为0，并将添加的内容隐藏起来，overflow:hidden与vsibility:hidden两者都是隐藏的作用，但两者不同的是一个不占位一个占位。

注意！
最后一个方法要考虑版本的兼容性，解决版本兼容性可以设置属性zoom:1；
（扩展：在IE6中没有BFC，但是有一个和BFC类似的hasLayout，在IE6中可以通过开启hasLayout来解决高度塌陷的问题，而开启这个haslayout的开启方式是设置zoom:1）