標籤：style blog class code tar ext
CSS區塊浮動
這種塊移動直到該區塊的外邊緣碰到碰到它的區塊邊框或浮動區塊為止
1.浮動的設定
在CSS中可以使用float屬性設定區塊框向左或向右浮動
代碼
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset = "UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #one{ 8 margin: 100px 350px; 9 width: 400px;10 height: 400px;11 border:1px dashed black;12 background-color: #ABCDEF;13 }14 .one{15 margin: 2px;16 width: 100px;17 height: 100px;18 border: 1px solid black;19 text-align: center;20 padding: 20px;21 float: right; 22 background-color: #f00;23 }24 .two{25 margin: 2px;26 width: 100px;27 height: 100px;28 border: 1px solid black;29 text-align: center;30 padding: 20px;31 background-color: #0f0;32 }33 .three{34 margin: 2px;35 width: 100px;36 height: 100px;37 border: 1px solid black;38 text-align: center;39 padding: 20px;40 background-color: #00f;41 }42 </style>43 </head>44 <body>45 <div id = "one">46 <div class = "one">塊一</div>47 <div class = "two">塊二</div>48 <div class = "three">塊三</div>49 </div>50 51 </body>52 </html>View Code
注意 float
沒有用float效果
用float的效果
2.行框和清理
通過CSS樣式中的從clear 屬性進行清除浮動
代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset = "UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #one{ 8 margin: 100px 350px; 9 width: 350px;10 height: 350px;11 border:1px dashed black;12 background-color: #ABCDEF;13 }14 .one{15 margin: 2px;16 width:100px;17 height: 100px;18 border: 1px solid black;19 text-align: center;20 padding: 20px;21 float: right;22 background-color: #f00;23 }24 .two{25 margin: 2px;26 width: 100px;27 height: 100px;28 border: 1px solid black;29 text-align:center;30 padding: 20px;31 float: right;32 clear: both; 33 background-color: #0f0;34 }35 .three{36 margin:2px;37 width:100px;38 height:100px;39 border:1px solid black;40 text-align:center;41 padding: 20;42 background-color: #00f;43 }44 </style>45 </head>46 <body>47 <div id = "one">48 <div class = "one">塊一</div>49 <div class = "two">塊二</div>50 <div class = "three">塊三</div>51 </div>52 </body>53 </html>View Code
注意clear
沒有用clear的效果
用clear的效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
