Question

在css2.1 spec中，有一个例子用于比较浮动与其他，当内部跨度不浮动时：

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes</TITLE>
    <style type="text/css">
        body { display: block; font-size:12px; line-height: 200%; width: 400px; height: 400px }
        p    { display: block }
        span { display: inline }
        #outer { color: red }
        #inner { color: blue }
        #inner { width: 130px; color: blue }
    </style>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

＆＃13;

当内跨度浮动时：

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes</TITLE>
    <style type="text/css">
        body { display: block; font-size:12px; line-height: 200%; width: 400px; height: 400px }
        p    { display: block }
        span { display: inline }
        #outer { color: red }
        #inner { color: blue }
        #inner { float: right; width: 130px; color: blue }
    </style>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

＆＃13;

我很困惑，为什么当它浮动时，内部跨度似乎下降到第二行，这是sepc中的规则：

元素浮动框的外部顶部可能不会高于包含由源文档中较早元素生成的框的任何行框的顶部。

结果这个位置？但是在picture in spec中，似乎没有下降，只是在当前行向右浮动。有没有我错过的东西？

浮动元素不会在当前行浮动

0 个答案: