Пользовательский стиль li рядом с плавающим элементом

Question

У меня есть элементы списка в индивидуальном стиле, которые могут go в одну строку и должны оставаться выровненными. В приведенном ниже фрагменте первый список работает нормально.

Но второй фрагмент кода go слева от изображения из-за абсолютного позиционирования. Есть ли способ, которым я могу расположить элементы рядом с плавающим элементом, чтобы они не go поверх него?

Содержимое исходит от ckeditor, так что я знаю только то, что они могут ввести плавающую левую фигуру и может окружить его чем угодно

.figure.figure-left {
    display: table;
    float: left;
    margin: 0 20px 10px 0;
}

ul:not(.cke_panel_list) {
    list-style: none!important;
    padding-left: 16px;
    position: relative;
    /* clear: both; */
}

ul:not(.cke_panel_list) li:before {
    font-family: FontAwesome;
    content: '\f10c'!important;
    color: #009EE0;
    font-size: 8px;
    vertical-align: top;
    position: absolute;
    left: 0;
}

.figure {
    clear: both;
    margin: 0;
    padding: 0;
}

.figure img.img-responsive {
    display: inline-block;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<h3>Good list. Atta boy</h3>
  <ul class="arrow-list">
    <li>List Item</li>
    <li>List Item going over one line and wraps around and stays nicely aligned etc etc etc fdfdsfsafsafdsa dsf ds fdsf ds fds fds fs</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <div class="figure figure-left"><img alt="" class="img img-responsive" width=200 src="https://cdn.sparesinmotion.com/sites/default/files/test-product-test.png">
  </div>
  <h3>Bad list, bold!</h3>
  <ul class="arrow-list">
    <li>List Item</li>
    <li>List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
<h3>And some more stuff, who knows what the editors might add?</h3>
</div>

Answer 1

Вы можете легко очистить ваши поплавки с помощью overflow: auto в списке:

.figure.figure-left {
    display: table;
    float: left;
    margin: 0 20px 10px 0;
}

ul:not(.cke_panel_list) {
    list-style: none!important;
    padding-left: 16px;
    position: relative;
    /* clear: both; */
}

ul.arrow-list {overflow: auto;}

ul:not(.cke_panel_list) li:before {
    font-family: FontAwesome;
    content: '\f10c'!important;
    color: #009EE0;
    font-size: 8px;
    vertical-align: top;
    position: absolute;
    left: 0;
}

.figure {
    clear: both;
    margin: 0;
    padding: 0;
}

.figure img.img-responsive {
    display: inline-block;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<h3>Good list. Atta boy</h3>
  <ul class="arrow-list">
    <li>List Item</li>
    <li>List Item going over one line and wraps around and stays nicely aligned etc etc etc fdfdsfsafsafdsa dsf ds fdsf ds fds fds fs</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <div class="figure figure-left"><img alt="" class="img img-responsive" width=200 src="https://cdn.sparesinmotion.com/sites/default/files/test-product-test.png">
  </div>
  <h3>Bad list, bold!</h3>
  <ul class="arrow-list">
    <li>List Item</li>
    <li>List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
<h3>And some more stuff, who knows what the editors might add?</h3>
</div>