標籤：style blog http ar color 使用 sp on div
使用下面的代碼作為示範例子。
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>無標題文檔</title> <style type=”text/css”>body{ margin:15px; font-family:Arial; font-size:12px; } .father{ background-color:#ffff99; border:1px solid #111111; padding:5px; } .father div{ background-color:;margin:15px; padding:10px; } .father p{ border:1px dashed #111111; background-color::#ff90ba; } .son1{ /*這裡設定son1的浮動方式*/border:1px dashed #111111; } .son2{ background-color:#6FF; border:1px solid #111111;} .son3{ background-color:#0F6; border:1px dashed #111111; } </style> </head> <body> <div class=”father”> <div class=”son1″>Box-1</div> <div class=”son2″>Box-2</div> <div class=”son3″>Box-3</div> <p>這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，</p> </div> </body> </html>
將son1盒子設定為向左浮動，代碼如下
.son1{
/*這裡設定son1的浮動方式*/
float:left;
border:1px dashed #111111; }
從中可以看出，box=2的背景和邊框完全佔據了box-1的位置，此時box-1的寬度不再伸展，而是能容納下內容的最小寬度。現在box-1已經脫離標準流，標準流中的box-2會頂到原來box-1的位置，而文字會繞著box-1排列。
將box-2的float屬性設定為left後，從背景色可以看出box-3就跑上來了，box-1和box-2之間的空白是由二者的margin構成的。
將box-3的float屬性設定為left後效果如下，文字會圍繞浮動的盒子排列。
css盒子的浮動(一)
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
