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;}
在页面显示里我们看得出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代码，改动的地方为div1的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可以对抗浮动，但只能对自身起作用！顾名思义就是某元素如果设置了clear该属性的话，该元素可以根据clear的值抗浮动，该css属性没有继承性，有以下几个值，很多网站的解释我感觉有一些歧义，所以重新做了解释：
left：设置了该属性值的元素的盒子的左侧边不能与浮动元素相邻
right：设置了该属性值的元素的盒子的右侧边不能与浮动元素相邻
both：设置了该属性值的元素的盒子的两侧边不能与浮动元素相邻
none：默认值，允许该元素的盒子边左右两侧与浮动元素相邻
inherit：继承父元素的clear属性
例子1，先来看left值的情况，具体如下：
代码：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8"/>
<style type="text/css">
.div1{width:300px;height:150px;background:red;float:left}
.div2{width:300px;height:150px;background:green;float:left}
.div3{width:400px;height:300px;background:blue;}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
渲染图：
首先来分析一下，div1是height=150的红色色块，div2是height=150的绿色色块，都有float:left的设置，因此div1和div2都脱离了原先的标准流向左侧挤压，而div3是height=300的蓝色色块，由于div3没有设置float的浮动属性，因此div3还是原来的标准流，但是由于div1和div2从原来的标准流里分离了，因此重新生成了标准流，div3会占据原先div1和div2的标准流位置，因此div3位置上移，变成如图的情况。
下面我们来给div3设置clear属性，属性值为left，这个时候页面渲染情况如下：
css如下：
.div1{width:300px;height:150px;background:red;float:left;}
.div2{width:300px;height:150px;background:green;float:left;}
.div3{width:400px;height:300px;background:blue;clear:left;}
渲染图：
可以看出div3采用clear属性值为left后位置下移了，这是为什么呢？
分析结果：上面已经说明了clear属性值设置为left，那么div3的盒子模型左边是不能接浮动元素的，但我们回到上面没有clear设置的图看一下，蓝色色块也就是div3就在div1的下面，div1红色色块浮动覆盖在div3上面，所以等于是div1浮动元素和div3的左边是紧邻的，这就符合了clear的起效条件，于是clear抗div1的浮动，于是下移到上图的位置，确保了div3的盒子模型左边没有与浮动元素相邻。
很多人认为是div1的浮动被清除了，这点是有歧义的，div3的clear属性只对自身起效，因此仅仅是为了抗浮动改变了div3，没有权力去更改div1，这点一定要明确！
所以如果上面的div3的clear值改为right，就会出现下面的渲染页面，clear并没有起作用，因为div3的右边并没有紧邻浮动元素，因此div1无须做任何改变。
下面我们再来看看clear:right的例子，首先我们先不用clear属性，看情况是如何的：
代码：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8"/>
<style type="text/css">
.div1{width:300px;height:150px;background:red;float:left;}
.div2{width:1400px;height:150px;background:green;float:right;}
.div3{width:400px;height:300px;background:blue;}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>渲染结果;
分析：div1左浮动，div2右浮动，div3没有浮动，因此div1和div2脱离原本的标准流，div1和div2形成新的标准流，由于div2右浮动被div1挤压了，所以自上而下div2排列在div1下，div3取代之前div1和div2的位置形成新的标准流，所以div3在div1和div2的下面被其两个div覆盖。
如果div3这个时候添加clea属性r的right值会怎么样，先不看渲染结果进行分析：
由于div3有clear的right设置，因此div3的盒子模型右边不能与浮动元素相邻，但是上面div3的右边与div2相邻，因此div3的clear属性开始起效，这会导致div3为了避免与div2的相邻下移到div2下以此达到目的。
下面我们来看下渲染结果对不对：
代码：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8"/>
<style type="text/css">
.div1{width:300px;height:150px;background:red;float:left;}
.div2{width:1400px;height:150px;background:green;float:right;}
.div3{width:400px;height:300px;background:blue;clear:right;}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>渲染结果如下，和我们分析的结果一致:
再来我们把div3的clear属性值换成both又会发生什么呢？分析一下：
首先我们看没有设置clear属性的值会发现，div3的左边还有右边都与浮动元素相邻，因此clear启动功效，但由于div1和div2的位置已经确定，div1左浮动在左侧，而div2被div1挤压到下方右浮动，因此为了避免div3与两者相邻，div3只需要位于div2下方即可，还是和clear值为left时一样的渲染结果，下图就是此种情况的渲染图：
最后我们看到这里会发现其实clear是帮助自身元素抗拒浮动元素的影响，根据自身的值帮助自身元素不与浮动元素相邻！只是启动这些效果的时候看上去很像清除了其他元素的浮动，其实并没有，这里很容易产生歧义，一定要重点理解！能起到这种效果的不仅仅是clear而已，还有很多其他的方法，但本篇博客暂时到这里结束，以后另外另写一篇进行总结。
4979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
