一、浮动的性质
1、浮动的元素脱离标准文档流，并且可以设置宽度和高度。
2、浮动的元素相互贴靠
3、浮动的元素有“文字环绕”效果
含有图片的div浮动，段落不浮动，文字会环绕图片。
4、div浮动了且没有设置宽度，那么将自动收缩为内容的宽度。
浮动（脱标）的元素是不能把容器惩处高度的。
二、浮动的清除
方法1：
给浮动元素的祖先元素加高度。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
换句话说，没有高度的容器无法关住浮动。所有后面盒子里面的浮动元素依然在贴上一个盒子里面浮动的元素。
网页制作的过程中，height属性很少出现，因为能被内容撑高。所以这个方法很少用。
方法2:
为后面浮动元素父亲添加clear: both;属性
11 <div> 22 <ul> 33 <li>HTML</li> 44 <li>CSS</li> 55 <li>JS</li> 66 <li>HTML5</li> 77 <li>设计模式</li> 88 </ul> 99 </div> 1010 1111 <div class="box2"> → 这个div写一个clear:both;属性 1212 <ul> 1313 <li>学习方法</li> 1414 <li>英语水平</li> 1515 <li>面试技巧</li> 1616 </ul> 1717 </div>
致命缺陷：margin 失效。本质原因还是因为两个div都没有高。
方法3：隔墙法
在两个div之间添加一个div
给这个div两个类 一个cl 给clear：both属性；一个h16给高度属性，用这个墙撑出高度，这样就避免了margin失效了。
虽然有中间的div(墙)撑出高度，但是前后两个div的高度依然是0。
1.cl{ 2 clear: both; 3 } 4 .h16{ 5 height: 16px; 6 } 7 8<div class="box1"> 9 <ul> 10 <li>HTML</li> 11 <li>CSS</li> 12 <li>JS</li> 13 <li>HTML5</li> 14 <li>设计模式</li> 15 </ul> 16 </div> 17 18 <div class="cl h16"></div> 19 20 <div class="box2"> 21 <ul> 22 <li>学习方法</li> 23 <li>英语水平</li> 24 <li>面试技巧</li> 25 </ul> 26 </div>
方法4：内墙法
1 <div class="box1"> 2 <ul> 3 <li>HTML</li> 4 <li>CSS</li> 5 <li>JS</li> 6 <li>HTML5</li> 7 <li>设计模式</li> 8 </ul> 9 10 <div class="cl h16"></div> 11 </div> 12 13 <div class="box2"> 14 <ul> 15 <li>学习方法</li> 16 <li>英语水平</li> 17 <li>面试技巧</li> 18 </ul> 19 </div>
把墙修在墙内，这样两个div都有高了
方法5：overflow：hidden；
一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。