CSS 关于浮动的那些事

       相信每个初学html5的童鞋都或多或少的对float浮动这一属性迷茫过，下面让我来为大家列举一下关于浮动的特性。

一、浮动元素会脱离文档流

       何为脱离文档流？假设我们在纸上写字，每一个字代表一个元素，我们让其中的一个字原地漂浮起来，那么我们会说这个字脱离了原先的位置，即脱离了文档。当我们给一个元素加入float属性时，它就跟字一样脱离了原先的位置，不再占用原本的位置，原本的位置便会空出来，假设有一个我们没有设置宽高属性的div，其中包含着一个元素，div在不设置高属性时，高默认是由内容撑出来，当我们给其内部的元素加入浮动属性时，元素便会脱离文档流，不在占div内部的位置，这时候div的高便没有了，这也是为什么要清浮动原因。

 

二、让行内元素可以支持宽高设置

        我们知道行内元素是不支持宽高设置的，当然我们可以加display：inline-block；或display：block；来使行内元素支持宽高设置，float属性也可以使行内元素支持宽高设置。

 

三、让块元素可以在同一行排列

        块元素是独占一行的，像div，每个块元素默认是独占一行，这跟块元素宽度的大小没关系，所以不要想着设置宽度可以让两个块元素在同一行显示，除非加上display：inline-block；属性，这时候给两个块元素同时加上浮动属性就可以让它们在同一行显示了。

 

四、宽高默认由内容撑出来

        这一个好理解，加入浮动属性时，我们不给它设置宽高的话，宽高默认由里面的内容撑出来。

 

五、一个元素设置浮动属性之后，该元素会像着设置的方向移动，直到碰到父级或浏览器的边缘，或者前一个浮动元素，就会停止浮动

        浮动、浮动，有浮便会有动，float-left：向左浮动；float-right：向右浮动；浮动的元素回向着所设置的方向移动，直到碰到前一个浮动元素，便会紧挨着前一个浮动元素停下，这也是浮动属性可以让块元素在同一行显示的原因。当该元素前面没有浮动元素时，便会继续移动直到碰到父级，然后紧挨父级停下，如果父级也没有，便会移动到紧贴浏览器时停下。

 

六、浮动元素的层级比正常块元素的层级高

       当一个元素浮动时，它的层级会比没有浮动的块元素的层级高，这也是浮动元素会覆盖前一个没有浮动的块元素的原因。

 

 

七、浮动元素不会覆盖文字或行内标签，只会覆盖元素或者有块元素特征的元素的边框和背景，所有文字或行内标签会围绕浮动元素显示。