本文主要解釋float元素對文字圖片的排版影響。
在css中有一個常見的圖文環繞效果。實現方式主要是將圖片左浮動，或者右浮動。其相鄰的文字，就會環繞圖片排列，代碼和效果如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:500px;
}
.img1 {
float:left;
}
</style>
</head>
<body>
<div>
我是文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
效果
twhr.png
我們發現當圖片設置了左浮動后，其相鄰文本元素只會環繞圖片排列并不會跑到圖片的下方和上方。所以我們可以推測出，浮動的元素是對文字圖片等文本元素的排版產生影響的．
有了這個案例，我們解釋排版中常碰到的一個現象
頁面上有兩個一樣的寬200像素，高200像素的div,其中div1添加了紅色和div2藍色背景,代碼如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
color:#fff;
/*float: left;*/
}
.div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
DIV1DIV1DIV1DIV1DIV1DIV1
</div>
<div class="div2">
我是文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
正常排列效果：
zcpl.png
當我將紅色div1設置為左浮動時（即將上方代碼中的float：left注釋取消掉），其所占據的空間上浮，所以藍色div2就跑入了原紅色div1的位置也就是div1的下方位置。
float:left; /*放開注釋*/
藍色div1浮動后效果：
flyh.png
此時，從視覺上我們發現，藍色div2中的文字沒有在藍色div2中。而我們的代碼明明書寫的文字是在藍色div2中的。這其中原因就是文字會受浮動元素影響，而并不會總是完全跟隨父級定位到父級的最左最上部分。
如果我們去掉藍色div2的寬度值，或給它設置超過200px寬度時，文字和圖片就會盡量往父元素即藍色div2的頂部和左邊靠，但它依然需要留出紅色div1的區間。
.div2{
width: 400px;
height: 400px;
background-color: blue;
}
寬度增加時效果：
gkyh.png
由此我們得出一個小結論
浮動的元素雖然會脫離正常的文檔流，但它還是會影響到正常文檔流中的文字排版。
