float: right;/clear: right;浮动属性

<!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的左边接着。这其实也是环绕写法。

float: right;/clear: right;浮动属性

如果把h1和h2的位置换一下：

推荐阅读更多精彩内容