Поскольку поплавки извлекаются из нормального потока, окружающие их коробки разрушаются.
Сначала я объясню, почему он работает в IE. Вы дали ему «макет», установив ширину или высоту для каждого элемента. Это width в этом случае. См. hasLayout для получения дополнительной информации об этом. Это очень удобно, поскольку оно также решит большинство других ошибок IE, с которыми вы столкнулись.
Волшебные пули:
height: 1%; /* or any other value. IE6 wrongly sees height as min-height. */
или, если вы не можете установить определенный размер, используйте
zoom: 1; /* A IE only property. Doesn't validate, but doesn't cause any harm either */
Итак, для вашей проблемы, чтобы она работала в правильном браузере, есть пара решений. Если для родительского элемента плавающих элементов также указано значение float, поле будет растягиваться вокруг дочерних элементов с плавающей точкой. Хотя это может вызвать проблемы в DOM, я не знаю, как обстоят дела с вашей разметкой.
Более простым способом может быть установка overflow:hidden;, которая также исправляет это. Но теперь вы должны следить за длинными URL, фрагментами кода или чем-то еще, что может случайно вытолкнуть из div. Если вы делаете весь сайт самостоятельно, это обычно не большая проблема, если вы передаете его кому-то для использования в CMS, шансы немного больше. Тем не менее, стоит рискнуть, если вы не можете решить множество плаваний вокруг вашего макета.
Добавление элемента в конце для очистки поплавков также является способом сделать это, но я считаю, что первые способы проще.
Мне лучше прекратить болтать, вы, вероятно, хотите увидеть код:
.entry {
width: 400px;
border: 1px solid #000;
float: left; /* Option 1 */
overflow: hidden; /* Option 2 */
}
.box1 {
width: 75px;
float: left;
}
.box2 {
width: 300px;
float: right;
}