由於在學習HTML元素浮動的時候，總是拎不清，比如什麼時候需要浮動，什麼時候需要清除浮動，左右浮動後，下一個元素顯示在哪裏，下下個元素顯示在哪裏等問題。而div的浮動佈局問題在頁面設計又是比較重要的，現自己學習總結了一下，供大家學習交流。
首先初始我們定義了6個div，它們的class是這樣的，div、div1、div2、div3、div4、div5，它們的高度是一樣的。都是200px。
接下來是他們的界面顯示和HTML，CSS代碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div{ width: auto; height:100px; background-color: #ff402a; } .div1{ width: 200px; height: 200px; border: 1px solid #17ff42; } .div2{ width: 210px; height: 200px; border: 1px solid #ff402a; } .div3{ width: 220px; height: 200px; border: 1px solid #fffa38; } .div4{ width: 230px; height: 200px; border: 1px solid #3513ff; } .div5{ width: 240px; height: 200px; border: 1px solid #0dffeb; } </style> </head> <body> <div class="div"></div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </body> </html>
下面我們來進行一些浮動的小示例，以來幫助我們更清楚地瞭解浮動。
測試1：在div1上增加浮動設置
我們可以看到，在div1上增加浮動效果後，上面的紅色div塊沒有受影響，而div2佔據原div1的位置，從上圖的紅色框就可以看出來。div1好像浮動在上面（注意這裏是浮動在本來它應該在的位置上面，因爲它沒有對上面的div造成影響，要說影響的話，他確實對下面的div有影響，因爲下面的div上來了）
但是當我們在div1下添加一些文字或者<p>元素，在div2中添加文字等元素時，文字，p元素不會佔據浮動div所在的位置，代碼和效果如下圖所示：
<body> <div class="div"></div> <div class="div1"></div> <p>jingchenyong1</p>jingchenyong2 <div class="div2">jingchenyong3<br/>jingchenyong4<br/></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </body>
當然這種情況用的比較少。
測試示例2：在div1、div2上都增加左浮動設置，效果圖如下所示：
.div1{ width: 200px; height: 200px; border: 1px solid #17ff42; float:left; } .div2{ width: 210px; height: 200px; border: 1px solid #ff402a; float:left; }測試示例3：在上面示例2的基礎上，再div3上清除浮動
.div1{ width: 200px; height: 200px; border: 1px solid #17ff42; float:left; } .div2{ width: 210px; height: 200px; border: 1px solid #ff402a; float:left; } .div3{ width: 220px; height: 200px; border: 1px solid #fffa38; clear: both; }
測試示例4：在div1左浮動，在div2上右浮動
.div1{ width: 200px; height: 200px; border: 1px solid #17ff42; float:left; } .div2{ width: 210px; height: 200px; border: 1px solid #ff402a; float:right; }
我們可以看到div3，佔據了原來div1的位置，div2浮動在右邊。
當我們清除div3的浮動時（clear：both、clear ：right、clear：left都可以）
.div1{ width: 200px; height: 200px; border: 1px solid #17ff42; float:left; } .div2{ width: 210px; height: 200px; border: 1px solid #ff402a; float:right; } .div3{ width: 220px; height: 200px; border: 1px solid #fffa38; clear: left; }
效果圖如下：
測試示例5：div1和div2右浮動，代碼和效果圖如下：
.div1{ width: 200px; height: 200px; border: 1px solid #17ff42; float:right; } .div2{ width: 210px; height: 200px; border: 1px solid #ff402a; float:right; }
在div3清除右浮動後的效果：
.div3{ width: 220px; height: 200px; border: 1px solid #fffa38; clear:right; }
以上是對div浮動效果的淺析，背後的原理理論還有待探討~~