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

本文链接：https://blog.csdn.net/csdn_ds/article/details/75145682

问题

<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>

执行结果：

按我的理解，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>

效果图：

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

改变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;*/
}

效果图：