html - float 元素旁边的列表样式

Question

看看我的示例，第二个列表样式完全关闭，因为它紧挨着 float 元素(除非您添加 inline-block 样式)。

问题是我无法知道它何时在 float 元素旁边并且它必须像正常情况一样在没有它的情况下工作(即必须是 block)。

如何修复第二个列表样式？

---

它是富文本编辑器内容，我不能将图像和第二个列表包装到 div 中并使用 flexbox 或其他东西，它必须自然流动。

编辑:即使是浏览器也会感到困惑 - 如果您按“运行”的次数足够多，公告有时会出现在文本旁边，有时会出现在左侧图像上方。

.wrapper {
  padding: 20px;
  border: 2px dashed #ec6161;
}

.wrapper::after {
  content: "";
  clear: both;
  display: table;
}

ul {
  /* display: inline-block; */
}

img {
  margin-right: 20px;
  max-width: 50%;
  float: left;
}

<div class="wrapper">
  <ul>
    <li>
      <div>Item 1</div>
      <ul>
        <li>
          <div>Subitem 1</div>
        </li>

        <li>
          <div>Subitem 2</div>
        </li>
      </ul>
    </li>

    <li>
      <div>Item 2</div>
    </li>
  </ul>

  <img src="http://www.pethealthnetwork.com/sites/default/files/content/images/how-introduce-new-cat-home-2-179981446.jpg" />

  <ul>
    <li>
      <div>Item 1</div>
      <ul>
        <li>
          <div>Subitem 1</div>
        </li>

        <li>
          <div>Subitem 2</div>
        </li>
      </ul>
    </li>

    <li>
      <div>Item 2</div>
    </li>
  </ul>
</div>

Answer 1

您需要清除 float 。使用 clear:both 到 UL。

这是更新后的 fiddle :

.wrapper {
  padding: 20px;
  border: 2px dashed #ec6161;
}

.wrapper::after {
  content: "";
  clear: both;
  display: table;
}

ul {
  /* display: inline-block; */
  clear:both;
}

img {
  margin-right: 20px;
  max-width: 50%;
  float: left;
}

<div class="wrapper">
  <ul>
    <li>
      <div>Item 1</div>
      <ul>
        <li>
          <div>Subitem 1</div>
        </li>

        <li>
          <div>Subitem 2</div>
        </li>
      </ul>
    </li>

    <li>
      <div>Item 2</div>
    </li>
  </ul>

  <img src="http://www.pethealthnetwork.com/sites/default/files/content/images/how-introduce-new-cat-home-2-179981446.jpg" />

  <ul>
    <li>
      <div>Item 1</div>
      <ul>
        <li>
          <div>Subitem 1</div>
        </li>

        <li>
          <div>Subitem 2</div>
        </li>
      </ul>
    </li>

    <li>
      <div>Item 2</div>
    </li>
  </ul>
</div>