浮动元素旁边的列表样式

Question

以我的示例为例，第二个列表样式完全不可用，因为它紧靠浮动元素（除非您添加inline-block样式）。

问题是我无法知道它何时紧靠浮动元素，并且它必须像正常情况一样在没有它的情况下工作（即必须为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

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

这是更新的小提琴：

.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>