谈谈css的float属性

在我们的工作中，许多人都用float来布局，结果导致出现各种各样的奇葩问题。其实我们都用float做了许多不在他本职工作之内的事情，我们仔细研究就会发现，目前所有的布局方式都可以用其他的css属性，唯一一个实现不了的就是“文字环绕图片”；所以说float的真正意义就是为了实现“文字环绕图片”，这是他最原始的作用

知道了浮动的本质后，我们来谈谈浮动造成的问题和解决办法

要清楚的了解浮动就要知道网页布局的原理。网页布局中，你可以把他看成一个三维立体的空间，你面对这电脑屏幕可以想象成你站在天空看着大地一样，常规元素都会一个一个按顺序排队，但是position和float会使这些元素变成超人，他们可以飞起来，漂浮起来。

元素浮动后，失去了重力，那他在地上的位置就没有了，后面的元素自然而然就会挤上来，所以想要解决浮动的问题就要告诉父元素，我虽然漂浮起来了，但是这块地还是我的。

1、overflow方法: 给父继一个overflow:hidden,那么父级元素就会把浮动的元素考虑在内，这样就阻止了盒子模型的塌陷问题

2、clearfix方法: 这种方法在实际的使用过程中使用的比较广泛，网上的将解析也比较全，这种方法的原理我认为是使用clearfix后告诉后面的元素，前面的元素是浮动的，他们的位置是不能占用的。当然这种方法在使用过程中要注意clearfix添加的位置。clearfix是加在浮动元素的父级的class中，但是有时候会因为某些未知的原因失效，此时，只需要一个空标签（p、div这些都可以）设置class为clearfix并且放在浮动元素的父级元素和下一站元素的中间即可

3、clear: both方法:  其实就是第二种方法中使用空标签的时候换一个class，而这个class中只需要一句话clear：both即可，不过在实际工作中我喜欢使用第二种里面的空标签方法多一点。

另外float跟display:inline-block; 一起使用导致上下不能对齐等问题；所以建议大家少用float,合理利用各种html语义化标签和属性,这样的兼容性更好。代码更清晰