【筆記】浮動屬性float的應用03——浮動一系列“清晰：右”影象
阿新 • • 發佈：2018-12-06
第1步 - 從一段文字和一系列圖片開始
對於本練習，我們希望將影象強制到右側以允許內容與它們一起流動。我們還想在影象的左側和底側新增邊距以推送內容。我們還希望影象在右邊緣上方堆疊在一起。
類選擇器已應用於每個影象。我們使用名稱“floatright”來幫助說明這一點，但可以使用任何名稱。但是，最好根據類別的含義來命名類，而不是它們的外觀。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <p> 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> <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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
效果圖如下：
第2步 - 將浮動：應用於影象
要將影象強制移到右邊緣，“float：right”將應用於類選擇器。在這種情況下不需要寬度，因為影象具有固有寬度。如果這是一個div，則必須使用寬度。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .floatRight { float:right;/*new codes*/ } </style> </head> <body> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <p> 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> <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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
效果圖如下：
第3步 - 新增保證金
可以新增邊距以將內容推離影象的左側和底側。
Netscape 4嚴重誤解了利潤率。要隱藏此瀏覽器的邊距，但允許它們由符合標準的瀏覽器應用，請將邊距規則放在單獨的樣式表中，並使用“ @import ”將樣式錶鏈接到html頁面。
我們在這裡使用簡寫規則：“margin：0 0 10px 10px;”。請記住，速記值按順時針順序應用; 頂部，右側，底部，左側。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .floatRight { float:right; margin:0 0 10px 10px;/*new codes*/ } </style> </head> <body> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" /> <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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <p> 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> <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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
效果圖如下：
第4步 - 新增“清除：正確”
要使影象堆疊在一起，必須將“清除”許可權應用於“floatright”選擇器。這將強制每個影象在源文件中較早的任何右浮動影象的底部外邊緣下方移動。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
margin:0 0 10px 10px;
clear:right;/*new codes*/
}
</style>
</head>
<body>
<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
<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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
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>
<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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>效果圖如下：
第5步 - 刪除段落上的margin-top
您可能已經注意到文字段落的頂部和“float：right”影象沒有對齊。這是由於段落頂部的餘量。
非樣式段落的頂部和底部通常有1em邊距 - 相當於一行文字。如果要刪除此邊距，請使用“p {margin-top：0;}”。應用時，段落和div將垂直對齊（見下文）。
這會影響頁面上的段落，使它們直接相互執行嗎？答案是不。如上所述，段落的頂部和底部有1em邊距。如果刪除了上邊距，則只會影響容器內的第一個段落。所有其他段落仍將通過底部邊距分隔到1em的高度。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
margin:0 0 10px 10px;
clear:right;
}
p {
margin-top:0;/*new codes*/
}
</style>
</head>
<body>
<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
<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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
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>
<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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>效果圖如下：
