HTML/CSS：Flexbox 不工作

Question

基于 this answer，我想使用 CSS 弹性框在博客上实现旁注。我最终得到了这个 HTML 代码：

article {
  width: 66%;
}

aside {
  width: 33%;
}

.lfloat {
  flex: 1;
  float: left;
}

.rfloat {
  flex: 1;
  float: right;
}

.pwn {
  display: flex;
}

<section>
  <h3>Lorem ipsum dolor</h3>

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <p class="pwn">
    <article class="lfloat">
      Lorem ipsum dolor sit amet...
    </article>

    <aside class="rfloat">
      This is just a small comment
    </aside>
  </p>

  <p>
    Lorem ipsum dolor sit amet...
  </p>
</section>

与获得具有相同高度的旁注不同，safari begins the next paragraph directly under the sidenote, adjacent to the other paragraph. Vivaldi 通过移动旁注前的“L”并使用“orem ipsum...”恢复下一行，甚至更加古怪。（链接是两个浏览器渲染输出的图片）

问题：

是我的代码不好还是浏览器的功能实现导致了我这个问题？
我怎样才能解决这个问题，让它至少在 FF、Safari 和任何基于 chromium 构建的东西上都能稳定呈现？

Answer 1

这里你应该使用，<div>或者<span>

根据萝卜的评论，<p> 将代表一段文字

article {
  width: 66%;
}

aside {
  width: 33%;
}

.lfloat {
  flex: 2;
  float: left;
}

.rfloat {
  flex: 1;
  float: right;
}

.pwn {
  display: flex;
}

<section>
  <h3>Lorem ipsum dolor</h3>

  <p>
    Lorem ipsum dolor sit amet...
  </p>

  <span class="pwn">
    <article class="lfloat">
      Lorem ipsum dolor sit amet...
    </article>

    <aside class="rfloat">
      This is just a small comment
    </aside>
  </span>

  <p>
    Lorem ipsum dolor sit amet...
  </p>
</section>

编辑

在这里你可以这样做只是改变这个

.lfloat {
  flex: 2;
  float: left;
}

flex: 1 至 flex: 2

希望对您有所帮助

HTML/CSS：Flexbox 不工作

HTML/CSS: Flexbox not working

html

css

css-float

flexbox