CSS: ясно встроенных элементов

Question

Проверить это JSFiddle:

<IMG src="https://www.google.com.hk/images/srpr/logo11w.png" alt="This image will illustrate floats"> 
<span>The contents of floats are </span> 

Изображение плавал, а span имеет clear:both. Однако, если значение span имеет значение дисплея inline или inline-block, клиренс не создается. Только если это block, клиренс создается.

Я проверил Spec, он говорит:

как: Требует, чтобы верхний край рамки коробки быть ниже нижнего внешнего края любых правых плавающими и левых плавающих ящиков, в результате из элементов ранее в исходном документе.

Он не упоминает, как display влияет на создание зазора. Может кто-нибудь помочь объяснить?

Answer 1

Это просто: clear применяется только к элементам уровня блока.

'Очистить'

Относится к: блочные элементы

Block-level elements определяются как

блочные элементы являются те элементы исходный документ визуально отформатированы как блоки (например, параграфы). Следующие значения значения display образуют элемент уровня блока: block, list-item и table.