Помещение границы вокруг плавающих элементов

Question

Скажем, у меня есть что-то вроде следующего кода, где я хочу отобразить текст между двумя изображениями, которые я плаваю влево и вправо.текст.Я попытался поместить <div> вокруг всех трех вышеупомянутых тегов и использовать style="border:2px black solid;".Хотя это добавляет границу, кажется, что изображения не принимаются во внимание.То есть мы получаем что-то вроде следующего (используя StackOverflow и логотипы Google).

Я предполагаю, что это происходит, потому что плавающие элементы не рассматриваются как часть <div>.Я разработчик программного обеспечения, а не веб-разработчик, поэтому я не эксперт в CSS.Но я думаю, что я помню, что плавающие элементы в некотором роде «игнорируются».Может кто-нибудь дать подробное описание того, что происходит и как это исправить?

Answer 1

Добавление overflow в этом случае со значением hidden или auto устраняет проблему.

Проверьте приведенную ниже скрипту:

http://jsfiddle.net/XMrwR/

Очистка перемещает путь переполнения

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

Answer 2

В CSS плавающие элементы не добавляют высоту родительскому элементу по умолчанию.

Решение состоит в том, чтобы просто установить overflow: hidden.

<div style="border: 2px solid black; overflow: hidden;" 
    <img src="testImage1.png" alt="Test Image 1" style="float:right;" />
    <img src="testImage2.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

скрипка: http://jsfiddle.net/JNets/

Answer 3

Добавьте эту строку в ваши свойства CSS:

overflow: hidden