css:float的深度理解

float是最早一批加入css2.0的属性之一，当时的初衷是为了实现报纸的文字环绕效果而经过后来无数的前端工程师的研究，才演变出现在如此错综复杂炫酷的应用。

一:基本说明

引入方法:float:left/right

影响一:使用此属性的的元素的元素将产生浮动流脱离标准文档流，视觉效果上好像提升了元素的层级类似有这样效果的还有:position:absulted/fixed

eg:代码部分

效果:
红色元素由于设置浮动提升了层级，后面的元素将会占据其位置
但是注意一点：后面的绿色块必须是块级元素如果是内联块级元素(inline-block),文本或者是触发BFC的元素就不会收到浮动流的影响而变成如下

并没有出现层级提升的情况

影响二：凡是设置了float的元素系统内部就会把此元素自动转换为内联块级元素(inline-block)
看代码:
]

浏览器效果：
可以看见div添加了float属性后变成了inline-block元素，所以与span元素同在一行，如果你不信，下面的例子更明显
看代码
html:内容

<span class="spn1">我是浮动的span</span>
<span class="spn2">我是没有浮动的span</span>

css:

    .spn1{
    float: left;
    width: 200px;
    height: 100px;
    background-color: red;
}

效果如下:

你会发现原来的span元素可以设置宽高了，并且与其他span同一行这就证明了浮动具有把添加此属性的元素变成内联块级元素，现在想一想为什么把几个div同时设置浮动就能实现并列排序了吧

三：清除浮动的影响
浮动元素产生浮动流会对其后面的元素产生布局上的影响这在我们实际开发中是不想看到的，所以记得我们用完浮动后要及时清除，这里我们只要清除浮动流即可

方法1(不推荐)：既然要清除浮动防止对后面元素产生影响，那么我们就在浮动元素的后面添加一个去浮动的元素即可如:

HTML:   
<div class="div1">  1 </div>
<p class="clear"></p>
<div class="div2">  2</div>

css:
div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
    .div2{
        width: 200px;
        height: 200px;
        background-color: green;
    }
    .clear{
        clear: both;
    }

效果:

原理：在浮动元素后面手动加一个块级元素(注意一定得是块级元素)

方法二：利用伪元素(推荐)
伪元素是存在与每一个标签上的正常的标签应该是

<p>::before 内容 ::after</p>

其实伪元素的特性与正常的元素没有什么区别，只是只能通过css操作
而已，所以利用伪元素就可以达到不增加标签来实现清浮动
三部曲缺一不可

.div1::after{
content:""      //必需的即使不写内容
display：block   //因为伪元素默认为inline，所以这里把他变成block
clear:both      //清除左右浮动
}

四：用途：

1:触发BFC
2：实现文字环绕图片布局(在图片上设置float:lefty/right即可)
3:实现块级元素单行排列(基本用法)`