在CSS中使用float指定浮动属性值，该属性的值指出了对象是否及如何浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中，所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法：float：none | left | right1、float取值none： 设置对象不浮动，默认值left： 设置对象浮在左边right： 设置对象浮在右边2、float的特性a)、浮动元素会从标准流中脱离b)、浮动元素会触发BFC（块级元素格式化）、不影响外边距折叠c)、 float元素会变成块标签如果float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值。float在绝对定位和display为none时不生效: 当display为none时元素会隐藏，所以float意义不大；当position为absolute绝对定位时元素也将从标准流中脱离，元素使用偏移量移动，float特性无效。浮动元素间会堆叠: 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素不能溢出包含块: 浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。水平方向不会溢出，垂直方向有可能会溢出清除浮动该属性的值指出了不允许有浮动对象的边。clear：none | left | right | both适用于：块级元素取值：none： 允许两边都可以有浮动对象 both： 不允许有浮动对象 left： 不允许左边有浮动对象 right： 不允许右边有浮动对象因为
div
是块级元素，
不浮动的话要单独占一行；后面的元素就要从下一行开始；
left
不定义
float:left
的时候，其实黄色那个块只是在left层下面一行，看起来在右下角是因为：
1、left
定义了700像素高，你可以
#left{
width:600px
height:700px
float:left
border:1px
solid
red}
就可以看到
left
的边框；
2、黄色的块定义了
float:right
在右侧浮动。
float:left 不会失效，只是没有达到你期望的显示效果。
float属性是较早的一个CSS属性，所有主流浏览器都支持。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
但是：1、如果在一行上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。这时候可能你就会发现显示与你的预期效果不符。
2、为某元素（A）设置float 表示浮动后，元素A 脱离文档流，不在文档流中占据空间，如果在A后面的元素没有float属性，很明显会显示在本该由A占据的位置上（因为A脱离了文档流），这时候在一些情况下也可能你会发现显示与你的预期效果不符。这时候可以使用 在A之后使用 clear属性（如clear:left） 来清除浮动。
