深入理解css之float
float的设计初衷##
文字环绕效果
BFC##
Block formatting context 【块级格式化上下文】
float属性的含义##
元素使用了float属性之后，可以使该元素脱离标准流，浮动在其他元素之上，不再占据原本的空间，会导致后面的元素上移并占用该元素原本的空间。
float属性仅对使用该属性的元素本身以及后面的元素产生影响（后面元素会上移-->页脚块上移）
float对div宽度的影响##
不设置div宽度时，div默认宽度是width：auto；自动调整宽度至最大，
设置float属性之后，div的宽度自动调整至最小（自动收缩并始终包裹住子元素）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
.image {
/*float: left;*/
border: 1px solid #efefef;
padding: 5px;
margin: 5px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid #efefef;
background: #fcc;
}
.text {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<div class="div1">div1</div>
<div class="text">
内容
</div>
</div>
<div class="image">
<div class="div1">div1</div>
<div class="text">
内容
</div>
</div>
<div class="image">
<div class="div1">div1</div>
<div class="text">
内容
</div>
</div>
</div>
</body>
</html>
效果：
未float之前：
float之后：
很明显：div.image的宽度缩小了！
块级元素如果不设置float，它默认会撑满整个屏幕，而如果设置了float，则只会包裹住其内容。这就是float的包裹性！！！
float对高度的影响##
设置了float的元素会脱离文档流，会导致其父元素出现“坍塌”的现象。不错，这就是它的破坏性！！！
清除浮动##
1.clear：both属性；HTML层面：在底部增加一个空div，或者CSS after伪元素底部生成（但是IE6/IE7不支持）
2.父元素BFC(IE8+)或haslayout(IE6/IE7)
BFC/haslayout通常声明
float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)
width/height/zoom:1/...(IE6/IE7)
但是BFC/hasLayout是不能一方通行的，存在兼容性问题，而zoom1是现代浏器不认可的，以下为折中方法
权衡策略：
.clearfix:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}/* 用于IE8 */
.clearfix{
*zoom:1;
}/* 用于IE6/IE7 */
还有一种更好的法
.clearfix{
**display:table;**
clear:both;
content:"";
}
clearfix应用在包含浮动子元素的父元素上
float的滥用##
1.float可以让元素block化
2.float的去空格化
蓝色部分为换行符产生的空白间距
按钮浮动之后，空格消失，现象1
去掉换行符，并添加 空格，
效果
按钮float之后，现象2
原因：
 实际上就是字符，float设计初衷就是为了实现文字环绕效果， 作为字符跟随在float元素后面
效果等价于下图的代码
现象1和现象2的区别就在于：上下按钮之间是否留有间距。那么原因是什么呢？
其实那不是间距 是 由于 空格带来的基线冗余 实际是行距 删除空格 或者 将文字大小font-size:0即可
float与流体布局##
文字环绕衍生：单侧固定
float与兼容性##
