css отображение свойства при применении float

Question

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

div.foo { 
    display: block; 
    float: left; 
} 

div.foo2 { 
    display: inline; 
    float: left; 
} 

div.foo3 { 
    display: inline-block; 
    float: left; 
} 

EDIT:

Если нет разницы в соответствии со спецификацией, а затем сделать некоторые устаревшие версии браузеров (гм, IE) делают их по-другому?

Answer 1

Если я прочитал spec правильно, и практика это подтверждает, установка float: left или right, переопределяет display собственности в любом случае и силы display: block на элементе (хотя и с особенностями, смотри ниже), поэтому будет никакой разницы между вашими тремя примерами:

покинул элемент генерирует бокс блока, который перемещается влево. Содержимое перемещается в правой части окна, начиная сверху (с учетом свойства «clear»).

право Подобно «влево», за исключением того, коробка поплыл вправо, а содержимое обтекает по левой стороне коробки, начиная с самого верха.

Коробка не плавает.

В отличии от нормального display: block, хотя, устанавливая float диктует свое собственное поведение в отношении к ширине, что переопределения display свойства: если ширина не была явно указана, плавающий элемент будет занимать столько же ширину, как это необходимо, в отличии к стандартным блочным элементам, использующим автоматическую ширину 100%.