css之浮動
浮動就是使元素脫離文檔流，按照指定的方向進行一個移動，遇到父元素邊界或者相鄰的浮動元素時，浮動元素會停下來。
脫離文檔流通俗的說就是在頁面中不占位置。
浮動有兩個值：float：left / right
與display:inline-block;的區別，盒子之間有空隙，如下圖。
1.左浮動float:left;
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6<style> 7 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 8 *{margin: 0; padding: 0;} 9 ol,ul{list-style: none;} 10 a{text-decoration: none; color: inherit;} 11 #container{padding: 50px; background: #fff;} 12 .box1 p{ 13 /* display: inline-block; */ 14 float:left; 15 width: 100px; 16 height: 100px; 17 border: 1px solid red; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="container"> 23 <div class="box1"> 24 <p>1</p> 25 <p>2</p> 26 <p>3</p> 27</div> 28 </div> 29 </body> 30 </html>
結果：
2.右浮動float:right;
代碼和上面類似。
結果：
3.所有的標簽元素都可以浮動，且浮動後都支持寬高。
4.float的特殊情況
1）當第一個元素給了浮動，第二個元素不給浮動時。
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 8 *{margin: 0; padding: 0;} 9 ol,ul{list-style: none;} 10 a{text-decoration: none; color: inherit;} 11 #container{padding: 50px; background: #fff;} 12 .box1 .p1{ 13 float:left; 14 width: 100px; 15 height: 100px; 16 color: #fff; 17 border: 1px solid red; 18 background: deeppink; 19 } 20 .box1 .p2{ 21 width: 200px; 22 height: 200px; 23 color: #fff; 24 border: 1px solid red; 25 background: green; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="container"> 31 <div class="box1"> 32 <p class="p1">1</p> 33 <p class="p2">2</p> 34 </div> 35 </div> 36 </body> 37 </html>
結果：
2）當第二個元素給了浮動，第一個元素不給浮動時。
代碼與上類似。
結果：
3）當大盒子寬度不夠時，浮動的元素會掉下來。
4）當父級寬度不夠時，換行，當浮動元素中有比換行元素高的的元素時，換行元素會被卡住。
5）浮動對文字的影響：文字會圍繞文字，
6）如果文字的後面再給一個浮動元素，那麽最後一排字體如果沒有占滿一行，並且有足夠的空間去容納後面的浮動元素，那麽最後一排文字會被擠開。
5.浮動的缺陷：當父級沒有給定高度時，會造成父級坍塌（指父元素沒有高度）。
6.清除浮動的方法
clear: left / right / both;
1）給浮動元素的下一個元素添加clear: both;
雖然清除了浮動，但是浮動父級元素並沒有被內容撐開。
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style> 11 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 12 *{margin: 0; padding: 0;} 13 ol,ul{list-style: none;} 14 a{text-decoration: none; color: inherit;} 15 #container{padding: 50px; background: #fff;} 16 .box1{ 17 border: 1px solid #000; 18 } 19 .box1 p{ 20 float:left; 21 width: 100px; 22 height: 100px; 23 color: #fff; 24 background: deeppink; 25 } 26 .box2{ 27 clear: both; 28 width: 200px; 29 height: 200px; 30 color: #fff; 31 background: green; 32 } 33 </style> 34 </head> 35 <body> 36 <div id="container"> 37 <div class="box1"> 38 <p>1</p> 39 <p>2</p> 40 <p>3</p> 41 </div> 42 <div class="box2">4</div> 43 </div> 44 </body> 45 </html>
結果：
2）在浮動元素後面加一個空盒子，但是突然多了一個盒子是違反代碼書寫規範的。
3）給浮動父元素加高度。這種方法擴展性不好，不利於布局，不能滿足自適應要求。
4）display：inline-block可以清除浮動，但是有間隙，且display：inline-block不支持margin：auto。
5）比較好的方法是給父級元素利用偽類after。
首先用偽類在父元素後面添加一個空內容，即content: ""，這時候偽類要設計成塊級元素，最後用clear: both;來清除浮動。
示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <style> 11 body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;} 12 *{margin: 0; padding: 0;} 13 ol,ul{list-style: none;} 14 a{text-decoration: none; color: inherit;} 15 #container{padding: 50px; background: #fff;} 16 /* .box1{ 17 display: inline-block; 18 width: 400px; 19 border: 5px solid #000; 20 } */ 21 .box1{ 22 width: 400px; 23 border: 5px solid #000; 24 } 25 .claerfix:after{ 26 content: ""; 27 display: block; 28 clear: both; 29 } 30 .box1 p{ 31 float:left; 32 width: 100px; 33 height: 100px; 34 color: #fff; 35 background: deeppink; 36 border: 1px solid #000; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="container"> 42 <div class="box1 claerfix"> 43 <p>1</p> 44 <p>2</p> 45 <p>3</p> 46 </div> 47 </div> 48 </body> 49 </html>
結果：
這個方法的優點是只需要在css中加三個樣式即可以清除浮動，方便維護，簡潔方便。
css之浮動