關於CSS中的float可能出現的小問題
- 前言：最近學習CSS的float所遇到點小問題，然後順便分享給大家。
一、什麼是CSS以及float
（一） CSS概述
CSS是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
（二） float概述
float屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
二、float可能出項的問題
（一) 當沒有父級塊明確的邊界時,float可能沒有預想的效果
1.沒有明確的邊界
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 #d1 { 9 float: left; 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 #d2 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 22 #d3 { 23 float: left; 24 width: 100px; 25 height: 100px; 26 background-color: blue; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div style="width:auto; border:solid 1px black;"> 33 <!--<div style="width: 300px;height: 300px;border: solid 1px black;">--> 34 <div id="d1"> 35 d1 36 </div> 37 <div id="d2"> 38 d2 39 </div> 40 <div id="d3"> 41 d3 42 </div> 43 </div> 44 45 </body> 46 47 </html>
浮動前
浮動後
2.有明確的邊界時
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 #d1 { 9 float: left; 10 width: 100px; 11 height: 100px; 12 background-color: red; 13 } 14 15 #d2 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 22 #d3 { 23 float: left; 24 width: 100px; 25 height: 100px; 26 background-color: blue; 27 } 28 </style> 29 </head> 30 31 <body> 32 <!--<div style="width:auto; border:solid 1px black;">--> 33 <div style="width: 200px;height: 200px;border: solid 1px black;"> 34 <div id="d1"> 35 d1 36 </div> 37 <div id="d2"> 38 d2 39 </div> 40 <div id="d3"> 41 d3 42 </div> 43 </div> 44 45 </body> 46 47 </html>
浮動前
浮動後
3.總結
在選擇需要進行浮動操作的時候，一定要明確浮動的邊界，這樣才能出想要的效果。
（二) 對div塊的設定導致的問題
1.div範圍定義較小
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 .divs { 9 /*float: right;*/ 10 } 11 12 .divs div { 13 float: right; 14 } 15 16 #d1 { 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #d2 { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div style="width: 700px;height: 700px;border: solid 1px black;"> 32 <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs"> 33 <div id="d1"> 34 d1 35 </div> 36 <div id="d2"> 37 d2 38 </div> 39 </div> 40 </div> 41 42 </body> 43 44 </html>
浮動前
浮動後
2.合理的div塊定義
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>floatTest</title> 7 <style type="text/css"> 8 .divs { 9 float: right; 10 } 11 12 .divs div { 13 /*float: right;*/ 14 } 15 16 #d1 { 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #d2 { 23 width: 100px; 24 height: 100px; 25 background-color: green; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div style="width: 700px;height: 700px;border: solid 1px black;"> 32 <div style="width: 200px;height: 200px;border: solid 1px black;" class="divs"> 33 <div id="d1"> 34 d1 35 </div> 36 <div id="d2"> 37 d2 38 </div> 39 </div> 40 </div> 41 42 </body> 43 44 </html>
浮動前
浮動後
3.總結
當我們將整個divs塊下的元素都進行了右浮動，但是我們以為這就是將divs塊進行了移動，但是其實只是d1和d2塊在divs塊中進行了移動，divs塊並沒有動，所以當我們要移動一整塊的divs和分別移動的效果是完全不一樣的，所以一定要注意這樣的小細節。