float: right;/clear: right;浮动属性
2017-11-13 本文已影响0人
富有的心
<!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的左边接着。这其实也是环绕写法。
