谈谈css的float属性

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

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

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

元素浮动后，失去了重力，那他在地上的位置就没有了，后面的元素天然而然就会挤上来，因此想要解决浮动的问题就要告诉父元素，我虽然漂浮起来了，可是这块地仍是个人。

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

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

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

另外float跟display:inline-block; 一块儿使用致使上下不能对齐等问题；因此建议你们少用float,合理利用各类html语义化标签和属性,这样的兼容性更好。代码更清晰