錯誤理解：
之前對浮動的理解是，只要添加了浮動，就盡量的往左上角靠攏。直到遇到了上一個浮動的元素，或者是沒有空間了才重新一行開始。
正確理解：
CSS的浮動，更准確的說是水平浮動
元素的水平浮動，意味着元素只能左右浮動，而不能上下浮動
一個浮動的元素會盡量向左或向右移動，直到它的外邊框遇到了包含框或另一個浮動的邊框為止
浮動元素之后的元素將圍繞它（此處指的是圖像布局）
浮動元素之前的元素不受影響
eg:如果圖像是右浮動，那么下面的文本流將環繞在它的左側
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動定義</title> <style type="text/css"> img{ float: right; margin: 8px; } </style> </head> <body> <p> <img src="img/3.jpg"/> 如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。 </p> </body> </html>
效果：
浮動特性：
1、塊級元素浮動將並排顯示，不再獨占一行
2、內聯樣式浮動將支持設置寬高，不僅支持margin-left(right)，而且開始支持margin-top(bottom)
3、浮動元素默認內容撐開寬度
4、浮動元素脫離正常的文檔流
5、浮動元素提升半層級