CSS中float专题
float的讲解：
| 初衷 | 例子 | 原理 |
| 实现图片文字的环绕效果 |  |
通过float，跳出了包裹自己的盒子，合盒子里面没有内容，那么height变为0；那么紧跟着本盒子的其他盒子就会往上移动，但是float后的元素并没有跳出文本流中，任然占有文本流的空间，其他盒子网上移动的过程中float后的内容就会去自动去拼接上移盒子中的内容，（但是两部分内容是独立的,可以通过margin: 0 50px 5px 0; 来设置间距）因此就会出现文字环绕的效果。 |
一、浮动产生原因
简单地说，浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题；
二、浮动产生负作用
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
三、css解决浮动，清除浮动方法
首先列举一个小案例：
<style>
.box{margin: 50px auto;border:1px solid #ccc;background: #fc9;color:#fff;}
.red{width: 80px;height: 100px;background: red;float:left;}
.sienna{width: 80px;height: 100px;background: sienna;float:left;}
.blue{width: 80px;height: 100px;background: blue;float:left;}
</style>
<body>
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>
子元素都设置了float属性，父元素div高度不能撑开，样式margin属性显示有问题；
方法一：添加新的元素 、应用 clear：both；
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
.clear{clear: both;}
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>
方法二:父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值。
.over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<body>
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>
方法三： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）
主要推荐使用这种方法清除浮动
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
.clearfix{
zoom:1;/*为了兼容IE*/
}
<body>
<div class="box clearfix">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
1、float以后，display的值变为:block;还会去除空格；
2、float和position:relative同时使用：
.t2{
background-color: red;
position: relative;
top: 50px;
right: -50px;
float: right;
}
效果为：先在原来的位置相对偏移以后，在执行float的浮动效果，都没有脱离标准流；
3、如果position:absolute,和float同时出现的话，那么float失效，因为position：absolute是将元素脱离了标准流；所以float不起作用。
补充：加了定位（position）以后，层高于标准流中的值；
