为什么我浮动第二个<p>,没有出现第一段文字包围第二段落的效果?

<head>
    <link rel="stylesheet" href="xiaolizi.css" />
    </head>
    <div>
  <p>
    A normal paragraph noting safsfjslfjs fjsdljfsljf fjslfsajfsf fjslfjsfl fsjlfjsjogeogeoneogn
    fjslkjslfjsofjsflsj   jldsjfslfjsl   jldsjfsdljeojewojbonsd   jdslijonskgweofj   jfosos 
   </p>
  <p class="aside">a  ajlsjfsla  jlsjfslf   lsjfsljfs  ljsfjsfjso  jflsjf sofjsofwofw eofwoefjwofjoshfw fw f sf
  </p>
  </div>
p.aside {float: right; width: 15em; margin: 1em 1em 1em; padding: 0.25em;
  border: 1px solid;}

图片描述

阅读 2.3k
3 个回答

首先,
html元素在浏览器渲染时,会根据网页结构的先后顺序进行渲染。
然后,
第一个p标记会首先占据一定高度
最后,
第二个右浮动p标记会参照第一个p标记的位置,渲染到其下方

把两个p标签位置换一下 浮动的p标签在上

如果要做环绕效果的话,第一个浮动,并且宽度不能为100%,第二个正常就OK了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题