Разница между «display: block; float: left ‘vs.’ display: inline-block; плыть налево’?

Существует ли практическая разница между отображением элемента слева (например, изображения): inline-block; применяется к нему, а не к отображению по умолчанию: block; правило применяется?

Другими словами, в чем разница между:

text

а также

 
text

?

Ответ @thirtydot может помочь вам … Ссылка на вопрос

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

Да, display: block избыточен, если вы указали float: left (или right ).

(Что произойдет, если вы попытаетесь указать отображение: inline и float: left?)

display: inline не будет иметь никакого значения, потому что установка float: left display: block float: left силы display: block «независимо от того, что»:

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

В противном случае, если «float» имеет значение, отличное от «none», поле плавает, а «display» устанавливается в соответствии с приведенной ниже таблицей.

Суммировать указанную таблицу: float = display: block .

Однако ваш конкретный пример float: left; display: inline float: left; display: inline полезен одним способом – он исправляет ошибку IE6.

Есть ли другие примеры избыточных комбинаций, которые нужно соблюдать? блок и ширина? и т.д,

Некоторые примеры:

  • Если вы установите position: absolute , то float: none принудительно.
  • top , right , bottom , left свойства не будут иметь никакого эффекта, если для position не установлено значение, отличное от static значения по умолчанию.

Есть ли инструмент, который может проверять такие вещи?

Я так не думаю . Это не то, что когда-либо понадобилось, поэтому я не понимаю, почему кто-нибудь написал бы такой инструмент.

Вам не нужно указывать float: left и display: inline-block для того же элемента, вы используете тот или иной, а не оба. Float используется для плавания текста вокруг элементов, его не лучшее оружие для выбора при выполнении макета. Пойдите с дисплеем: блок и встроенный блок.

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

Элементы блока – формы в соответствии с моделью css box. Они имеют ширину, высоту, прописку, границу и границу, и они складываются вертикально друг над другом.

Встроенные элементы – не образуют ящики. Они сидят горизонтально рядом друг с другом.

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

Хороший ресурс: http://learnlayout.com/inline-block.html

Согласно SitePoint:

Если вы новичок в CSS-макетах, вам будет прощено думать, что использование CSS-поплавков в воображаемых способах – это высота мастерства. Если вы потребляете столько инструкций по компоновке CSS, как вы можете найти, вы можете предположить, что освоение поплавков – это обряд прохождения. Вы будете ослеплены изобретательностью, пораженной сложностью, и вы получите ощущение достижения, когда вы, наконец, поймете, как работают поплавки.

Не обманывайте себя. Тебе промывают мозги.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Когда вы используете float: left; почти любые элементы ведут себя как элемент block . Поэтому в этом конкретном случае нет никакой разницы.

введите описание изображения здесь