网站炫酷首页新华传媒b2b商务平台
总结css重要知识点时，再看了一遍张鑫旭大神的float博文（以及下一篇），加上自己的理解下下了对float的总结。
1.float最初是用来做什么的？
float最初被发明其实只是用于让文字环绕图片，但是因为其浮动性质，越来越多的人将其应用到了布局当中，所以引出了很多事情。。。
2.float有哪些特性？
包裹性
float 让文字浮动到图片周围，这就是包裹性
撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。
其实 display:inline-block 也具有包裹性
<style>div{background-color: red;}</style>
</head>
<body><div>11111111111</div>
</body>
div是块元素，所以会占一行
div{background-color: red;display : inline-block;
}
将div变为行内块元素，不占一行了，相当于div就包裹住了里面的内容，这就是包裹性
当然float也有这种包裹性
div{background-color: red;float : left;
}
不过float是有方向的包裹，它可以向右包裹，display : inline-block 只能向左包裹
破坏性
float的破坏性非常大，它会破坏（更准确来说应该是脱离）正常的文档流。
有个哥们儿说的很形象，浏览器的窗口其实是个立体的，有好几层，添加了float属性的元素就会脱离原来那一层，跑到上一层上面，它会盖住原来那层的一些东西。（不知道这样理解对不对，但我认为这样会很好理解）
举例：
<style>#temp1{background-color: red;width: 100px;height: 100px;}#temp2{background-color: blue;width: 300px;height: 300px;}#temp3{background-color: green;width: 200px;height: 200px;}</style>
</head>
<body><div id="temp1"></div><div id="temp2"></div><div id="temp3"></div>
</body>
三个div都没有添加float属性，则会这样从上到下正常显示
给第一个div添加float属性
第一个div脱离原来的那一层，到上一层去了，其他两个div会往上移，占领第一个div的原有的位置。
给第一个，第二个div都设置float
第一个第二个都 “上去了” ，因为都在上面那层所以第二个div会浮动到第一个div右边，会包裹着第一个div，这就是包裹性。第三个占领它两个的原有位置。
给三个div都设置float属性
可想而知是并排的。。。
延申：
display : inline-block 也是有包裹性，如果我们将三个div的float属性都替换成 display : inline-block 会怎么样呢？
（如果你的三个div有间隔，那是因为你的三个div之间有空格导致的，改成下面这样就能解决了
<div id="temp1"></div><div id="temp2"></div><div id="temp3"></div>
)
为什么三个div会底部对齐呢？因为三个现在都是行内块元素，它们所在的这一行被高度最高的一个行内块元素撑着的，所以就像是三个不同高度的方块放在一个容器里，当然会底部对其啦
3.float产生的后果是什么？
float产生的最常见的后果是父元素的高度塌陷
<style>#container{border: 2px solid black;}#container>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div id="container"><div></div></div>
给红色div添加浮动后
可看出来红色div的父元素container高度为零了，这就是高度塌陷，因为红色div相当于已经从父元素“出来了”，父元素中没有内容能撑开它了，所以就会高度塌陷。
解决高度塌陷的办法就是给父元素设置个高度。
4.清除浮动
这是未清除浮动的时候
<style>#temp1{background-color: red;width: 100px;height: 100px;float: left;}#temp2{background-color: blue;width: 300px;height: 300px;float: left;}#temp3{background-color: green;width: 200px;height: 200px;}</style>
</head>
<body><div id="container"><div id="temp1"></div><div id="temp2"></div></div><div id="temp3"></div>
</body>
我们想清除浮动那该怎么办呢，想让第三个div不被第一个第二个div的浮动影响，让它呆在它原来的位置，该怎么办呢？
最推荐
（1）设置伪元素::after来解决
#container::after{display: block;clear: both;content: "";visibility: hidden;height: 0;
}
给前两个div的父元素设置伪元素，那么会在父元素后面插入一个伪元素，让它清除浮动clear:both就不会影响后面的元素了。
要注意的是伪元素一定要设置content属性，为空也行，伪元素的display默认为inline，这里要设置为display:block，clear:both是清除浮动， visibility: hidden;height: 0;都是为了这个伪元素不会在页面中显示出来。
（2）overflow:hidden;
#container{overflow : hidden;
}
但是这个方法在碰到margin负边距排版时会产生意想不到的结果，所以最好别这样用。
（3）直接在container后放一个<div style=“clear:both;”></div>
这个会浪费一个标签，并且只能使用一次，还可能会影响后续布局，所以别用。