<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.center{text-align: center;}
#bg{
background-image: url(1.jpg);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.3;
z-index: -1;
}
/*h1是右側浮動，h2先右側浮動然后刪掉右側浮動后就會自然落到下一行排列，效果如圖1.這里如果寫成h2{clear: right;}，就只有刪除右側浮動，就會出現如圖2的效果，所以h2{float: right;clear: right;}寫法加了float: right;還是有作用的，作用是在右側浮動同時落到下一行自動排列。*/
h1{float: right;}
h2{float: right;clear: right;}
</style>
</head>
<body>
<p class="center"><strong>《雨霖鈴》</strong></p>
<p class="center"><em>柳永</em></p>
<p> 寒蟬凄切，對長亭晚，驟雨初歇。</p>
<p>都門帳飲無緒，留戀處、蘭舟催發。</p>
<p>執手相看淚眼，竟無語凝噎。念去去、千里煙波，暮靄沉沉楚天闊。 </p>
<p>多情自古傷離別，更那堪冷落清秋節！</p>
<p>今宵酒醒何處？</p>
<p>楊柳岸、曉風殘月。</p>
<p>此去經年，應是良辰好景虛設。</p>
<p>便縱有千種風情，更與何人說？ </p>
<h1>《雨霖鈴》 </h1>
<h2>柳永</h2>
<div id="bg"></div>
</body>
</html>
357FE9A5-4642-488C-AAF3-832F40CD0BE1.png
圖一如上
04755AD0-5CC3-4B23-B1AD-B7C5C92616C5.png
圖二如上
如果把h1和h2的位置換一下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.center{text-align: center;}
#bg{
background-image: url(1.jpg);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.3;
z-index: -1;
}
h1{float: right;}
h2{float: right;clear: right;}
</style>
</head>
<body>
<h1>《雨霖鈴》 </h1>
<h2>柳永</h2>
<p> 寒蟬凄切，對長亭晚，驟雨初歇。</p>
<p>都門帳飲無緒，留戀處、蘭舟催發。</p>
<p>執手相看淚眼，竟無語凝噎。念去去、千里煙波，暮靄沉沉楚天闊。 </p>
<p>多情自古傷離別，更那堪冷落清秋節！</p>
<p>今宵酒醒何處？</p>
<p>楊柳岸、曉風殘月。</p>
<p>此去經年，應是良辰好景虛設。</p>
<p>便縱有千種風情，更與何人說？ </p>
<div id="bg"></div>
</body>
</html>
A0A09096-B734-4FD6-9E0B-8788C6850DB0.png
由此可見，h1設置的右側浮動對后面的p標簽也有影響，后面的p標簽沒有clear,所以就在h1的左邊接著。這其實也是環繞寫法。
