CSS плавает и блокирует элементы

Question

У меня раздражающая проблема с макетом CSS. Я пытаюсь разместить изображения на определенной странице:

img {
  float: left;
}

Я думаю, что мои заголовки не начинаются с:

h3 {
  clear: left;
}

Все работает нормально, за исключением некоторых изображений, которые имеют списки (или любой элемент блока), плавающие за ними (или нет, как в случае). Причина этого на самом деле ясна в спецификации CSS: блочные элементы не работают. Линейные / встроенные элементы делают.

Однако это реальная проблема для списков. Есть ли способ обойти это довольно общим и совместимым способом?

Answer 1

Вот что я всегда делаю, чтобы убедиться, что поплавок всегда очищен:

1. Добавить следующее в CSS:

   .clearfix:after {
       content: ".";
       display: block;
       clear: both;
       visibility: hidden;
       line-height: 0;
       height: 0;
   }
   
   .clearfix {
       display: inline-block;
   }
   
   html[xmlns] .clearfix {
       display: block;
   }
   
   `*` html .clearfix {
       height: 1%;
   }
   

   Вы также можете найти этот код здесь .

2. Отметьте каждого родительского элемента, который перемещен с классом clearfix.

Answer 2

Похоже, проблема в очистке поплавков. Но, как сказал комментарий, скриншот был бы хорош. Я лично очищаю свои поплавки, устанавливая свойство переполнения: http://www.quirksmode.org/css/clearing.html