Как получить встроенные блоки, чтобы освободить место для поплавков?

Question

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

<div style="background: yellow; display: inline-block"> 
    <div style="float: left; width: 128px; height: 128px; background: cyan">Float</div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br> 
    Vivamus blandit porta rhoncus.<br><br> 
    Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.<br><br> 
    Sed pellentesque ligula enim, at porta nibh viverra quis.<br><br> 
    Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit. 
</div> 

В Internet Explorer, это делает, как и ожидалось: Firefox и Chrome делают то же HTML разному:

Обратите внимание, как в рендеринге Firefox, ширина инлайн-блок такова, что оно точно соответствует тексту без поплавка. Это приводит к тому, что строки не подходят после того, как float добавлен для бесполезного разрыва.

Похоже, что Firefox и Chrome выполняют эту конструкцию сначала (1), вычисляя предпочтительную ширину встроенного блока, как если бы поплавок не был там, (2) добавление поплавка и (3) выкладка плавающий текст вокруг поплавка, используя ширину, вычисленную в (1), как ширину встроенного блока.

Поведение I хочу вот поведение, выполняемое Internet Explorer. Есть ли способ добиться такого же эффекта в других браузерах, таких как Firefox и Chrome?

Answer 1

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