为什么CSS中设置了clear:both的文本段落还会出现在设置了float:left的图片右边？而不是另起一行？
clear:both不是不允许有浮动元素出现在设置了该属性的内容左右吗？请大家看看下面的代码，指导一下：<HTML><HEAD><TITLE>明月几时有</TITLE><...
clear:both不是不允许有浮动元素出现在设置了该属性的内容左右吗？
请大家看看下面的代码，指导一下：
<HTML>
<HEAD>
<TITLE>明月几时有</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
img.p1{float:left;margin-right:0.8em;
margin-bottom:0.5em
}
img#p2{position:absolute;top:250px;left:200px
}
p{font-size=20px;font-style:italic;text-indent:30px;clear:both;
line-height:1.4em
}
body{ background-color:lightyellow}
-->
</STYLE>
</HEAD>
<body>
<p>
<img src="tu2.jpg" class="p1" width="250" alt="">
明月几时有，把<br>
酒问青天，不知天上<br>
宫阕，今夕是何年？<br>
我欲乘风归去，唯恐<br>
琼楼玉宇，高处不胜<br>
寒，起舞弄清影，何<br>
似在人间？<br>
</p>
<p>
<img src="tu3.jpg" id="p2" width="250" alt="">
转朱阁，低绮<br>
户，照无眠。不应有<br>
恨，何事长向别时<br>
圆？人有悲欢离合，<br>
月有阴晴圆缺，此事<br>
古难全但愿人长<br>
久，千里共婵娟。<br>
</p>
</BODY>
</HTML>
只有5分，全给您了 展开
请大家看看下面的代码，指导一下：
<HTML>
<HEAD>
<TITLE>明月几时有</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
img.p1{float:left;margin-right:0.8em;
margin-bottom:0.5em
}
img#p2{position:absolute;top:250px;left:200px
}
p{font-size=20px;font-style:italic;text-indent:30px;clear:both;
line-height:1.4em
}
body{ background-color:lightyellow}
-->
</STYLE>
</HEAD>
<body>
<p>
<img src="tu2.jpg" class="p1" width="250" alt="">
明月几时有，把<br>
酒问青天，不知天上<br>
宫阕，今夕是何年？<br>
我欲乘风归去，唯恐<br>
琼楼玉宇，高处不胜<br>
寒，起舞弄清影，何<br>
似在人间？<br>
</p>
<p>
<img src="tu3.jpg" id="p2" width="250" alt="">
转朱阁，低绮<br>
户，照无眠。不应有<br>
恨，何事长向别时<br>
圆？人有悲欢离合，<br>
月有阴晴圆缺，此事<br>
古难全但愿人长<br>
久，千里共婵娟。<br>
</p>
</BODY>
</HTML>
只有5分，全给您了 展开
4个回答
展开全部
现在clear:both所指的是<P>标签，包含img和文字，整个<p>clear:both对里面的内容排列是没有影响的。
如果希望文字另起一行，需要将所有的文字用<p></p>标签包围，并设置clear:both属性。
【不过不知道你设置 img#p2 的position:absolute是想干嘛~】
如：
<HTML>
<HEAD>
<TITLE>明月几时有</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
img.p1{float:left;margin-right:0.8em;
margin-bottom:0.5em
}
img#p2{position:absolute;top:250px;left:200px
}
p{font-size=20px;font-style:italic;text-indent:30px;clear:both;
line-height:1.4em
}
body{ background-color:lightyellow}
-->
</STYLE>
</HEAD>
<body>
<img src="tu2.jpg" class="p1" width="250" alt="">
<P>
明月几时有，把<br>
酒问青天，不知天上<br>
宫阕，今夕是何年？<br>
我欲乘风归去，唯恐<br>
琼楼玉宇，高处不胜<br>
寒，起舞弄清影，何<br>
似在人间？<br>
</P>
<img src="tu3.jpg" id="p2" width="250" alt="">
<p>
转朱阁，低绮<br>
户，照无眠。不应有<br>
恨，何事长向别时<br>
圆？人有悲欢离合，<br>
月有阴晴圆缺，此事<br>
古难全但愿人长<br>
久，千里共婵娟。<br>
</p>
</BODY>
</HTML>
如果希望文字另起一行，需要将所有的文字用<p></p>标签包围，并设置clear:both属性。
【不过不知道你设置 img#p2 的position:absolute是想干嘛~】
如：
<HTML>
<HEAD>
<TITLE>明月几时有</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
img.p1{float:left;margin-right:0.8em;
margin-bottom:0.5em
}
img#p2{position:absolute;top:250px;left:200px
}
p{font-size=20px;font-style:italic;text-indent:30px;clear:both;
line-height:1.4em
}
body{ background-color:lightyellow}
-->
</STYLE>
</HEAD>
<body>
<img src="tu2.jpg" class="p1" width="250" alt="">
<P>
明月几时有，把<br>
酒问青天，不知天上<br>
宫阕，今夕是何年？<br>
我欲乘风归去，唯恐<br>
琼楼玉宇，高处不胜<br>
寒，起舞弄清影，何<br>
似在人间？<br>
</P>
<img src="tu3.jpg" id="p2" width="250" alt="">
<p>
转朱阁，低绮<br>
户，照无眠。不应有<br>
恨，何事长向别时<br>
圆？人有悲欢离合，<br>
月有阴晴圆缺，此事<br>
古难全但愿人长<br>
久，千里共婵娟。<br>
</p>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
p的位置不对。
<HTML>
<HEAD>
<TITLE>明月几时有</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
img.p1{float:left;margin-right:0.8em;
margin-bottom:0.5em
}
img#p2{position:absolute;top:250px;left:200px
}
p{font-size=20px;font-style:italic;text-indent:30px;clear:both;
line-height:1.4em
}
body{ background-color:lightyellow}
-->
</STYLE>
</HEAD>
<body>
<img src="tu2.jpg" class="p1" width="250" alt="">
<p>
明月几时有，把<br>
酒问青天，不知天上<br>
宫阕，今夕是何年？<br>
我欲乘风归去，唯恐<br>
琼楼玉宇，高处不胜<br>
寒，起舞弄清影，何<br>
似在人间？<br>
</p>
<p>
<img src="tu3.jpg" id="p2" width="250" alt="">
转朱阁，低绮<br>
户，照无眠。不应有<br>
恨，何事长向别时<br>
圆？人有悲欢离合，<br>
月有阴晴圆缺，此事<br>
古难全但愿人长<br>
久，千里共婵娟。<br>
</p>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你clear:both;放的位置不对
你应该把你现在的P标签改成div
然后单独给文字加P标签
然后设置P标签clear:both;
就行了
你应该把你现在的P标签改成div
然后单独给文字加P标签
然后设置P标签clear:both;
就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道你想要得到什么效果，但是可以肯定的告诉你，clear:both是有效果的
你直接告诉我你想要达到什么效果就可以了，我帮你修改代码
你直接告诉我你想要达到什么效果就可以了，我帮你修改代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
