浮动元素特征
脱离文档流，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。也就是说，如果一个父盒子中有两个子元素，其中一个子元素浮动，若另一个元素为块级元素，则会无视浮动元素，被浮动元素覆盖；若另一个元素为内联元素，则会环绕浮动元素。
修改元素display属性
注意 ！！！由于float意味着使用块布局，它在某些情况下修改display值。
行内元素会转换为块级元素。
布局变化
浮动元素的兄弟元素为块级元素：
<div id="div1">111
<div id="div2">222</div>
<div id="div3">333</div>
</div>
#div1{
background: #6666FF;
/*overflow: hidden;*/
}
#div2{
background: #FF6666;
width: 200px;
height: 200px;
float: left;
}
#div3{
background: #999999;
width: 300px;
height: 100px;
}
效果展示：
注意此时兄弟元素被浮动元素覆盖了，但文字环绕浮动元素。
浮动元素的兄弟元素为内联元素
将div3的cssdisplay样式修改
#div3{
background: #999999;
width: 300px;
height: 100px;
display: inline;
}
效果展示：
清除float浮动问题的方法
从以上案例可以看出，如果不给父元素设置高度，会导致父元素高度塌陷。在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器。
以下清除浮动方法实质：
可以分为两类：
一.利用clear属性
二.触发父元素BFC
解决方法一：添加空元素
就是在浮动元素下方添加一个非浮动元素
<div style="clear:both;"></div>
原理：
父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。
缺点：
要在页面中增加冗余标签，违背了语义化的原则。
解决方法二：浮动的父容器
将父容器也改成浮动定位
<div id="div1" style="float:left">111
<div id="div2">222</div>
<div id="div3">333</div>
</div>
优点：
不用修改HTML代码
缺点：
父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。
解决方法三：浮动元素的自动clearing
<div id="div1" style="overflow: hidden;">111
<div id="div2">222</div>
<div id="div3">333</div>
</div>
缺点：
一旦子元素的大小超过父容器的大小，就会出显示问题。
解决方法四: after伪选择符
通过CSS语句添加子元素，这样就不用修改HTML代码。CSS语句中有一个:after伪选择符，就可以在父容器的尾部（包含在父容器中，为父容器的子元素）自动创建一个子元素，这正好符合我们的需要。
#div1::after{
content:""
display: block;
clear: both;
}
#div1{
zoom: 1;
}
其中的"div1"是父容器的class名称，"content:"";"是在父容器的结尾处放一个空字符，"height: 0;"是让这个这个空字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。
什么是hasLayout
IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
在默认情况下，拥有Layout的元素包括：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
!!!注意，<p>和<div>默认不拥有Layout
凡是具有以下CSS属性的元素，也会拥有布局：
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE专用属性）
writing-mode: tb-rl（IE专用属性）
overflow: hidden|scroll|auto（只对IE 7及以上版本有效）
hasLayout是IE特有的属性，不是CSS属性。可以用Javascript函数hasLayout查看一个元素是否拥有Layout。如果有，这个函数就返回true；否则返回false。hasLayout是一个只读属性，所以无法使用Javascript进行设置。
