Почему это ясно: оба действуют глобально?

Question

Выпуск

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

То, что я хочу сделать, это иметь строку на 45px ниже миниатюры или текста (в зависимости от того, какая высота выше).

Preview

Пожалуйста, посмотрите на этот образец .

Любая помощь будет принята с благодарностью!

Answer 1

Просто используйте хак overflow: hidden; для завершения float с.

Добавьте CSS overflow: hidden к родительскому элементу.

РЕДАКТИРОВАТЬ

В качестве бонуса.Если вы хотите использовать некоторые причудливые CSS3-вещи (например, drophadows), вышеописанный хак не получится.

Существует новый хак: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

Хотя этот хак также имеет некоторые проблемы.

И потребуется некоторое время, прежде чем вы сможете серьезно заняться причудливыми CSS3-вещами.

Вы можете использовать его, но поддержка браузера будет плохой в течение длительного времени:)

Answer 2

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

.clear { height:0; overflow:hidden; clear:both; }

Вставьте его под ваши плавающие элементы, чтобы очистить их, это

Answer 3

Плавающая пиктограмма div слева и текстовый div слева.после них установите div

<div style="clear:both"><!-- --></div>

Div, который содержит все 3 из них, займет длину самого высокого div.

В основном:

<div class="container">
   <div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
   <div class="text" style="float:left; width: 50%">My text</div>
   <div style="clear:both;"><!-- --></div>
</div>