【筆記】浮動屬性float的應用02——浮動影象和標題（所有步驟組合在一起）
第1步 - 從一段文字和一張圖片開始
對於本練習，我們希望將影象強制到右側以允許內容與其一起流動。我們還想在影象下面有一個標題。
第2步 - 新增div影象和標題
第一個修改是HTML程式碼。在影象和標題周圍新增div。在這種情況下，我們還在div中添加了一個類選擇器（class =“floatright”）。這裡可以使用任何名稱。
<div class="floatright">
第3步 - 將“float：right”和寬度應用於div
將“float：right”應用於div。這將強制div到其包含框的右邊緣。浮動元素時也需要寬度 - 除非它是影象。
float: right;
width: 100px;
第4步 - 將保證金應用於div
可以新增邊距以將內容從包含影象和標題的div的左側和底側推開。
如果Netscape 4是目標瀏覽器，則應使用簡寫規則（例如“margin-left：20px;”和“margin-bottom：20px;”），因為此瀏覽器嚴重誤解了與邊距相關的速記規則。
如果符合標準的瀏覽器是目標，並且邊界規則對Netscape 4隱藏（使用“ @import ”），則可以使用單個速記規則 - “margin：0 0 10px 10px;”。
請記住，速記值按順時針順序應用; 頂部，右側，底部，左側。
margin: 0 0 10px 10px;
第5步 - 新增背景顏色
您可以新增背景顏色，使影象和標題從整個頁面中脫穎而出。正如您所看到的，除了標題之外，它不會顯示在頁面上。通過向div新增一些填充來解決此問題。
background-color: #ddd;
第6步 - 新增填充
您可以向div新增一些填充以擴充套件背景顏色。
padding: 10px;
第7步 - 為div新增邊框
要為div新增邊框，請使用“border：1px solid＃666;”。同樣，Netscape 4不喜歡這個規則，因此應該使用@import將其隱藏在瀏覽器中。
border: 1px solid #666;
第8步 - 為影象新增邊框
要為影象新增邊框，可以使用“後代選擇器”規則。影象和標題位於div內部，因此它們是div的後代。這意味著您可以使用規則“div img”來定點陣圖像。此規則的問題在於它將以任何div內的任何影象為目標。
更具體地說，我們可以使用“div.floatright img {border：1px solid #ddd;}”縮小選擇範圍。這將針對使用“floatright”類設定樣式的div內的任何影象。
由於影象兩側的邊框為1px，因此div的寬度應從100px更改為102px（100px影象，1px左邊距，1px右邊距= 102px）。
width: 102px;
div.floatright img { border: 1px solid #000; }
第9步 - 刪除段落上的margin-top
您可能已經注意到文字段落的頂部和包含影象的div沒有對齊。這是由於段落頂部的餘量。
非樣式段落的頂部和底部通常有1em邊距 - 相當於一行文字。如果要刪除此邊距，請使用“p {margin-top：0;}”。應用時，段落和div將垂直對齊（見下文）。
這會影響頁面上的段落嗎？其他段落會直接相互影響嗎？答案是不。如上所述，段落的頂部和底部有1em邊距。如果刪除了上邊距，則只會影響容器內的第一個段落。所有其他段落仍將通過底部邊距分隔到1em的高度。
p { margin-top: 0; }
第10步 - 玩邊框
您可以在div和影象上使用邊框顏色來建立不同的效果。
width: 103px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}
div.floatright img
{
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
}
完了！
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:103px;
margin:0 0 10px 10px;
background-color:#dddddd;
padding:10px;
border-top:1px solid #999;
border-right:2px solid #555;
border-bottom:2px solid #555;
border-left:1px solid #999;
}
.floatRight img {
border-top:2px solid #555;
border-right:1px solid #999;
border-bottom:1px solid #999;
border-left:2px solid #555;
}
p {
margin-top:0;
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
標題在這裡
</div>
<p>
Lorem ipsum dolor sit amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。Ut wisi enim ad minim veniam，quis nostrud exercation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat，vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi。
</p>
</body>
</html>效果圖如下：
