首页 > 代码库 > css的浮动以及如何清除浮动
css的浮动以及如何清除浮动
css的浮动是经常会在实际中运用到，之前我对浮动的理解就是使用float，除此之外没有深入理解，后来发现对于浮动还是有必要深入理解一下。
css浮动
css的浮动是float属性，该属性没有继承性，默认值为none，该属性有四个值，以下一一解释:
1)right：向右浮动
2)left：向左浮动
3)none：没有浮动
4)inherit：规定继承父元素的浮动
css的浮动实际上就是打破标准流，如果说没有浮动的元素是在一个标准流里，那么浮动的元素将脱离原本的标准流浮动。
元素的浮动效果
例子：以下四个div并没有进行浮动设置
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8"/>
<style type="text/css">
.div1{width:1000px;height:100px;background:red;}
.div2{width:200px;height:100px;background:yellow;}
.div3{width:800px;height:100px;background:green;}
.div4{width:700px;height:100px;background:blue;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>
</html>
我们来看一下下面的3d视图，就会发现这四个div处于同一个标准流，相对于body层另起一层，下方紫色的边缘白色底的是body层，白色边白色底为html层，为了看得更清晰，我调整了角度。
由于每个div独占一行，根据标准流div1、div2、div3、div4自上而下进行排列！
下面我们将css改动一下对div1进行右浮动，为了让例子更明显，将div2的height改为200px，且div的width改为1500px，具体如下，改动的部分标红了：
.div1{width:1500px;height:100px;background:red;float:right;}
.div2{width:200px;height:200px;background:yellow;}
.div3{width:800px;height:100px;background:green;}
.div4{width:700px;height:100px;background:blue;}在看3d视图前我们先来看普通的页面显示：
在页面显示里我们看得出div1右浮动，导致div1浮到了最右边，而且div2上浮动了，div1位于div2的所在的层的上方覆盖了div2的一部分，可以证实div1和div2、div3、div4不是在一个标准流上，div1打破了原先的标准流，进行了浮动，因此div2取代了之前div1的标准流代替了div1原先的位置，下面我们来看看3d视图就能更清晰的了解到这一点：
自此我们可以得出结论，没有设置浮动属性的元素皆为同一个标准流上，浮动的属性会相对于浮动的对象漂浮在上方，而且会放弃原本没有浮动所占的标准流位置，这就是为什么div1浮动后，div2会跑到上面来的原因，因为原先div1所占的位置清空了，原先的标准流被破坏并进行了重新配置，所以div2向上移动到原先div1所占的位置！
那么还有一个问题，为什么是div1遮盖div2，不是div2遮盖div1呢？因为浮动的元素总会位于原先所处的标准流上方！这个非常重要，这里div1、div2、div3、div4原本是同一个标准流，但是div1浮动后打破了原先的标准流，因此div1总会位于这个破坏重新建构的标准流上方！这样就很好理解了。
下面为了能更熟悉浮动的这种理论模式，我们多看一个例子，便于更好的理解：
.div1{width:1500px;height:400px;background:red;float:right;}
.div2{width:200px;height:200px;background:yellow;}
.div3{width:800px;height:100px;background:green;float:left;}
.div4{width:700px;height:100px;background:blue;}先来看看页面渲染的结果：
我们看上面的css代码标红部分，改动的地方为div的height为400，div3改为了左浮动，那么div2和div4是没有浮动的，它们在一个标准流里，并且因为div1和div3已经浮动了，所以以前占据的空间已经清空，原先的标准流被打破并且重新建构，因此div2和div4重新布局顶替了原先div1和div3的位置，而div1和div3之前都是在同一个标准流，所以浮动 后它们位于同一个流里，虽然都在div2和div4上方，但是div1和div3会按照新的标准流从上而下排列，而不会互相覆盖！因此如上图那样。
下面是3d视图，可以更好的理解一下:
下面我们来看一个这样的例子：
我们给上面的例子的div1中加一个class为divn1的div，颜色为粉红，为左浮动，具体css如下：
.divn1{width:800px;height:100px;float:left;background:pink;}<div class="div1"> <div class="divn1">divn1</div> div1 </div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div>页面渲染如下：
这里相信很多人都会混乱起来，其实分析一下就很好理解，没有浮动前，div1、div2、div3、div4位于同一个标准流，之后div1和div3进行了右浮动和左浮动，而两者位于之前打破过的标准流上方，所以会覆盖之前的div2和div4，同时div1和div3构建了新的标准流，因此不会互相覆盖，而是由上往下进行排列，到这里都很好理解，和上面的解释一致，这里改变的是div1内部增加了一个divn1，divn1进行了右浮动，并且在div1内建立了一个属于自己的层，同时也建立了一个自己的标准流，它所位于的层高于div1，从3d视图中可以看出来，这个时候的div1、div2、div3、div4是同一个层，这里一定不要搞错，但是渲染的情况是，div3覆盖了divn1，这是为什么呢？
以下为3d视图：
其实这是因为divn1不管有没有浮动，都会如此渲染，这个是由于divn1对于div1来讲是一个内部的新的层，这个层是在div1内部，它的高度过高，导致了溢出，它能覆盖div1，是因为divn1的层比div1高，并不是浮动导致的，但它的覆盖权利在div1内部，因为它的层在div1内部，这就是为什么无法覆盖div2的原因。
能突破上面的只有进行position处理，position可以改变divn1的层所处的范围，因此可以打破覆盖权利范围，例如上面divn1加上position:relative;top:0px;就会变成如下图：
这是因为position打破了原本divn1的限制范围，它的权利范围不再限定于div1内部，而它的层位于div1上方，而div1和div3位于同一个层，因此可以覆盖div3！
元素浮动对文字的影响：文字环绕效果
浮动不仅仅是有打破标准流的效果，还有文字环绕效果，这点需要注意！因为这个很容易被忽略。
首先我来看看以下这个例子:
<div style="width:300px;height:auto;background:red"> <div style="width:100px;height:100px;background:blue;">内部div1</div> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 <div style="width:100px;height:100px;background:yellow;">内部div2</div> </div>
可以看出div内部存在一个div1和一个div2，这两个div会在外部div内部新建一个层，这个层高于外面的div，因此会覆盖红色背景的外部div，由于没有浮动，因此根据标准流自上而下的排列，要注意div内部的文字也是标准流的一部分，因此也是由上而下进行排列，排列顺序为div1、文字、div2，因此渲染成上图的样子，下面是3d视图！
下面对div1和div2进行浮动，div1为左浮动，div2为右浮动。打破了原先的标准流，div1和div2将会位于原先标准流的上方，但是由于文字是文本流，和文档流的标准流不一样，文本流虽然因为div1的左浮动破坏了原先文档流和文本流之间标准流的排列，但是文本流和文档流不一样的是它不是完全上移，而是环绕在周围，也就是文字环绕！下方的div2是右浮动，由于受到文本流的挤压会移到最右边的下方没有文字的地方进行排列！具体如下图显示：
元素的浮动效果对文字的影响主要体现在文字环绕上面，虽然div1和div2的浮动打破了原先的标准流，从标准流中脱离了出来，但是依然受到了文字的挤压，这就是为什么div2无法上浮到最上方的右侧的原因，之所以浮动的元素依然会受到文字挤压而不是完全脱离标准流覆盖div内的文字，是由于原本浮动的设置一开始就是为了进行环绕效果的实现，后来进行拓展才成了今天的允许全部元素进行浮动，同时衍生了浮动脱离标准流的定义，但文字环绕的效果依然进行了保留，并没有完全脱离标准流。
如果要完全脱离标准流，需要使用position：absolute进行绝对定位，这样就会完全覆盖文字，而不会环绕！
清除浮动clear
clear可以对浮动进行清除，但只能对自身起作用!该属性没有继承性，有以下几个值:
left：左侧不允许浮动
right：右侧不允许浮动
both：左右两侧都不准许浮动
none：默认值，允许左右两侧的浮动属性
inherit：继承父元素的clear属性
例子如下：
css的浮动以及如何清除浮动