float是css中很重要的一个属性，（最初是为了做图片环绕技术）后面被人们常用于页面布局。

我个人对于浮动的理解：当对于一个元素设置浮动属性的时候，首先这个元素先向外平移一个平面，然后往设置的方向进行浮动，直到遇到父级的边界或者其他的浮动元素就会停止，现在所在的平面就不是以前那个平面了，相应的之前的位置也不复存在了，所以就有了脱离文档流这一说。因为他脱离了文档流，不在之前的那个平面了，所以当父级没有设置高度时，就没有内容撑开了。然后就有了页面塌陷这么一说。所以说到底，他们的根源都是因为浮动元素脱离文档流所导致的。那么问题来了，我们应该怎样解决这些问题了？

1.刚才说了，父级元素没有设置高度时，浮动元素脱离文档流后没有内容支撑，就没了高度。所以我们可以自己给父级一个高度就可以解决了。

2.刚才说到了，浮动元素脱离文档流后上升到了另外一个平面，所以父级里面没有东西支撑可以导致页面塌陷，那么我们能不能想一个办法让父级也到这一个平面了？父级如果也到这个平面之后，不就有东西支撑了吗？然后我们是不是就可以让父级也浮动？

3.对于清除浮动有一个属性专门清除浮动所带来影响的clear：left/right/both;添加新的元素 、应用 clear：both；

4.是对3的拓展，因为你这样就会多一段代码，所以就想到了伪元素。父级::after{display:block；(必须要有的)content："";(必须要有的)clear：both；zoom：1；（但是有的浏览器不兼容）}所以一般都是：父级{（兼容IE6/7）zoom:1;}

父级::after{content:"";display: block;height:0;clear:both;}

浮动后的会级元素的属性也发生了变化：设置浮动之后，块级元素的宽度不再跟随父级宽度，而是内容决定(内容撑开宽度)

浮动后的会级元素的属性也发生了变化：可以设置尺寸以及盒模型。