float 属性是CSS中非常重要的属性之一，在布局中经常使用到，但它可不像其他属性一样安分，如果对它不够了解，当你使用时或许会出现一点点问题，所以，，，就一起看看吧。

float 浮动

一.浮动元素的性质

1.脱离正常文档流

之所以说浮动元素不像其他大部分属性一样安分，是因为它会使使用了该属性的元素脱离了正常文档流。（啥，什么叫正常文档流，那我就用通俗易懂的大白话说一下：正常文档流是元素默认的摆放规则，块级元素会默认独占一行空间，在竖直方向上排放，行内元素占据自身空间大小，水平方向依次排放。即，当你写HTML时，没有使用浮动，定位这些属性时，可认为是正常文档流。）脱离了正常文档流，使得他并不会占用实际的空间位置，即其他正常元素会当它不存在（既然你都不在正常文档流了，我们就不和你玩了，不理你，哈哈哈）。

看例子：

未使用float属性：

在方块1上使用了float：

为了使看的明白，使方块1向右移动了，这样就知道2在底下。为什么在底下呢。因为他压根儿就不理浮动元素，表现的当它不存在。但注意细节的会发现，红色方块里的数字2怎么在下面呢。这是因为，块级元素不会受浮动元素的影响，但文本能够感觉到浮动元素的存在，这是很重要的一点。

2.浮动元素可设宽高

这是什么意思呢，块级元素不必多说，注意的是当行内元素设置了浮动后，它就不在是行内元素了，可设宽高了。

3.浮动元素会依次贴边排列

什么叫依次排列呢，，这很重要，比如有三个div ,分别为1,2,3如果对这三个div均设置左浮动，则1在最左边，2会去靠1,3会去靠2.

如果当行宽度不够无法放下三个方块，则最后一个会折行靠左。

3.浮动元素造成父容器塌陷

就是如果在子元素上使用了浮动，会使得它的父容器高度塌陷，这是什么意思呢。可以这样理解，浮动元素脱离了正常文档流，所以并不占据实际空间，所以会出现这种情况。

直接看例子，更为直观：

 一个div里三个子div，并且都左浮动，给父div加border即可看出使得高度出现塌陷了。因为父容器高度是由子元素的高度决定的。那么怎么解决这个问题呢。我们只有清除浮动就可以了。

清除浮动主要有3种方法：1.在最后加一个空div，并使用清除浮动属性clear；

                                    2.使用伪元素添加div并清除浮动；

                                    3.BFC清除浮动

清除浮动有时间再写。。

二.浮动的使用场景：

主要用于块级元素的并排布局。

只是对学习的知识点做一个总结，温习。如果有理解不对之处，或有补充的希望多多提建议。

CSS之浮动