Почему не работает clear?

Question

Т.е. как поставить надпись "Будьте внимательны" не используя <br> вниз под картинку?

<img src="images/flamp.JPG" style="border: solid 1px rgba(102,102,102,0.500); box-shadow: 0px 0px 10px 8px rgba(0,0,0,0.20); margin: 12px; clear: both; float: left; ">
            <span style="clear: both;">Будьте внимательны.</span>

Answer 1

Если не ошибаюсь, clear без float не имеет смысла, потому и не работает.

А если задача поставить друг под другом - можно просто затолкать элементы в div, или указать им стиль display:block. Блочные элементы в отличие от строчных отрисовываются друг под другом.

Как вариант - уложить их в контейнер, где они просто не влезут друг за другом.

А самый модный и требующий кучи настроек, но довольно гибкий вариант- flex.

img {
  border: solid 1px rgba(102, 102, 102, 0.500);
  box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.20);
  margin: 12px;
  clear: both;
  float: left;
}

span {
  float: left;
  clear: both;
}

<img src="images/flamp.JPG">
<span>Будьте внимательны.</span>

Answer 2

Свойство clear применяется только к блочным элементам, поэтому надо добавить в стили span-а свойство display: block.

<img src="https://i.sstatic.net/AOwa0.jpg?s=64" style="border: solid 1px rgba(102,102,102,0.500); box-shadow: 0px 0px 10px 8px rgba(0,0,0,0.20); margin: 12px; clear: both; float: left; ">
<span style="clear: both; display: block">Будьте внимательны.</span>

https://drafts.csswg.org/css2/#propdef-clear

Applies to: block-level elements

Но возможно вам вообще тут не нужен float и достаточно задать картинке display: block.

<img src="https://i.sstatic.net/AOwa0.jpg?s=64" style="border: solid 1px #66666680; box-shadow: 0px 0px 10px 8px #0003; margin: 12px; display: block">
<span>Будьте внимательны.</span>

БЛОГ НА HUSL

Почему не работает clear?

Ответы (2 шт):