探讨CSS中元素浮动后，文字环绕于浮动元素周围，没有与浮动元素重合的问题

女爷i 2022-06-12 04:16 481阅读 0赞

## 问题 ##

<html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>浮动</title>	
    	<style type="text/css"> 		
    		div{
    			width:100px;
    			height:100px;
    		}		
    		#box1{
    			background-color:red;
    		}
    		#box2{
    			background-color:green;
    		    float:left;
    		  
    		}
    		
    		#box3{
    			background-color:yellow;
    		}
    	</style>
    	
    </head>
    
    <body>
    	<div id="box1">div1</div>
    	<div id="box2">div2</div>
    	<div id="box3">div3</div>
    </body>
    </html>

执行结果：

![20170715105501078][]

按我的理解，div2向左浮动了，div3就跑到div2的下面了，同时div3中的内容应该也就看不到了，但真实效果却不是这样的，div3的内容被挤出来了，这个是怎么回事呢？

## 寻找原因 ##

经过查询资料后，让我了解到了float的历史背景：

早些时候，W3C规定出来的浮动实际并不是为了布局所用，当时是为了做文字环绕才使用了浮动，只是后来人发现用它做布局也挺不错的，故至此float就担任了CSS中布局的任务，但我们还是不要忘了，float起初就是为了做文字环绕的。

可能浮动并不是像我想象的那样，元素完全的脱离了文档流，其实浮动还是比较特殊的，虽然脱离的文档流，但最终还是能影响到布局。

下面让我们比对一下绝对定位和浮动的区别，感受一下真正的脱离文档流是什么样子的。

<html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>浮动与绝对定位</title>
    	
    	<style type="text/css"> 
    		#container{
    			position: relative;
    			width: 600px;
    			height: 200px;
    			background-color: blue;
    		}
    		#div1{
    			position: absolute;
    			left: 10px;
    			top: 10px;
    			width: 200px;
    			height: 100px;
    			background: #ccc;
    		}
    		#div2{
    
    		}
    	</style>
    	
    </head>
    
    <body>
    	<div id="container">
    		<div id="div1">div1</div>
    		<div id="div2">昏暗的台灯下，我凝视着这一杯茶，沸水一次又一次的冲击，让我感到了茶的清香。那苦涩中略微含着的一点甘甜，也被我贪婪的嘴给霸占了，眼的朦胧，勾勒出朦胧的记忆，可记忆却已不再朦胧。</div>
    	</div>
    </body>
    </html>

效果图：

![20170715105505955][]

绝对定位是将元素彻底的从文档流中删除，并相对于某个父元素进行定位，元素原先在文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响其他元素的布局了。

改变css样式：

#container{
       width: 600px;
       height: 200px;
       background-color: blue;
    }
    #div1{
       float: left;
       width: 200px;
       height: 100px;
       background: #ccc;
    }
    #div2{
       background-color: green;
       height:180px;
       /*padding-left:220px;*/
    }

效果图：

![20170715105511540][]

从上图可以看出，浮动使元素脱离了文档流，但依然影响了布局。在CSS中，浮动元素几乎“自成一派”，比较特殊。这种影响来源于一个事实：**一个元素浮动时，其他内容会“环绕”该元素**。

从上图可以看出，div2的确占据了div1的位置，绿色的部分和灰色的部分有重合，所以可以说，浮动的元素脱离了文档流。但div2的文字内容并没有被div1给覆盖，而是环绕在div1的周围，所以可以说，浮动影响了布局。其实环绕是浮动最初的目的。

## 总结 ##

绝对定位是使元素完全的脱离文档流，也是我们大部分人理解的浮动，影响了自身的位置，但并没有影响到其它元素的内部布局。

float可以理解是一种特殊的“浮动”，元素虽然脱离的文档流，但依然会影响到其他元素的内部布局。float有两个功能：

1、脱离文档流

2、文字环绕

对于具体的情况，使用float都需要把这两点考虑进去。

[20170715105501078]: /images/20220612/2c22fbb10ee04471902dadf6d21965f3.png
[20170715105505955]: /images/20220612/4114feb0aec04972828bc257305306a3.png
[20170715105511540]: /images/20220612/d9802d94c6f54f9ca30bbfc63c6489c9.png