В чем фактическое отличие display: inline и float: left

[TonKhaO]

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

То есть в чем разница

1. display: inline

2. float: left если элемент блоковый

и кстати тоже было бы интересно узнать что такое когда float: left; и display: inline (про баг ИЕ6 который исправляется как раз инлайном я знаю) но что это за зверь интересно :-)

Просьба сильно не ругать а обьяснить либо ссылочкой либо на словах

[TonKhaO]

пока сам нашел разницу в том что при просто display: inline если у элемента проставлять width то ширина все равно будет прежняя

[Searcher]

Товарищ TonKhaO, вы не понимаете суть, отсюда и непонимание разницы между этими свойствами. А разница в первую очередь во взаимодействии с окружением.

1. Надо понимать, что есть свойства, которые делают элемент блочным и есть, которые делают строчным, промежуточного не бывает. float - делает элемент блочным, а display:inline - строчным. Что такое блочный и что такое строчный лучше почитайте в разделе "Шаг за шагом" этого сайта или где-нить еще, а то мне тут целую лекцию расписывать как-то нет времени.

2. float:left или float:right помимо блочности еще выводят элементы из основного потока, что дает много возможностей, это тоже не проблема найти во внешних источниках.

3. display:inline просто задает элементу свойства строчного, но из потока не выводит.

Вообще, честно говоря, тут как-то все очевидно должно быть...

[TonKhaO]

Товарищ TonKhaO, вы не понимаете суть, отсюда и непонимание разницы между этими свойствами. А разница в первую очередь во взаимодействии с окружением.

1. Надо понимать, что есть свойства, которые делают элемент блочным и есть, которые делают строчным, промежуточного не бывает. float - делает элемент блочным, а display:inline - строчным. Что такое блочный и что такое строчный лучше почитайте в разделе "Шаг за шагом" этого сайта или где-нить еще, а то мне тут целую лекцию расписывать как-то нет времени.

2. float:left или float:right помимо блочности еще выводят элементы из основного потока, что дает много возможностей, это тоже не проблема найти во внешних источниках.

3. display:inline просто задает элементу свойства строчного, но из потока не выводит.

Вообще, честно говоря, тут как-то все очевидно должно быть...

ну впринципе тогда получается что инлафновский и флоатнутый лишь выводят или не выводят элемент из потока по сути дела

[Searcher]

Ничё не поняли...

Плавающие элементы - это дополнительное свойство к блочности. Плавающими могут быть только блочные элементы.

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

Название классов прямо указывают на основные характеристики. Инлайн - в линии, в тексте, с общим выравниванием, высотой, верхними и нижними отступами и т.д. и т.п. А блочный горизонтально заполняет весь доступный объем, самостоятелен по размерам, отступам и т.д. и т.п.

Ребят, кто знает хорошую ссылку на эту тему? Скиньте человеку.

[TonKhaO]

Ничё не поняли...

Плавающие элементы - это дополнительное свойство к блочности. Плавающими могут быть только блочные элементы.

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

Название классов прямо указывают на основные характеристики. Инлайн - в линии, в тексте, с общим выравниванием, высотой, верхними и нижними отступами и т.д. и т.п. А блочный горизонтально заполняет весь доступный объем, самостоятелен по размерам, отступам и т.д. и т.п.

Ребят, кто знает хорошую ссылку на эту тему? Скиньте человеку.

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

[SelenIT]

Вкратце как-то так:

Инлайн - это обычная строка текста. Она переносится по словам (если инлайновый элемент обвести рамкой, при переносе эта рамка разорвется), учитывает соседние пробелы, последующий текст продолжается в той же строке. Инлайны подчиняются text-align (в частности, их можно центрировать).

Плавающий блок - это, как справедливо отмечено выше, именно блок (строки текста переносятся внутри него, рамка получается сплошная), пробелы между закрывающим тегом и следующим не учитываются, последующий текст "вытесняется" в незанятое соседнее пространство и там переносится по строкам как обычно, столько строк, сколько уместится по высоте блока. "Выпадают" из контейнера (не влияют на его высоту, если нет последующих блоков с clear или отдельного контекста форматирования, напр. через overflow:hidden). Ширина блока по умолчанию ужимается по контенту. Может прижиматься только к правому или левому краю, центрировать нельзя. По вертикали всегда выравниваются по верхней границе. Бывают проблемы в IE6.

Есть еще inline-block: внутри он ведет себя как блок (сплошной прямоугольник, может содержать несколько строк и т.п.), а снаружи - как строчный элемент (слово текста в рамке или картинка). Соседние пробелы учитываются, последующий текст идет в одну строку, продолжается после блока. Ширина блока по умолчанию ужимается по контенту. Не "выпадают" из контейнера. Подчиняются text-align (можно центрировать). Могут выравниваться по вертикали с помощью vertical-align (по верху, низу, центру, базовой линии текста и не только). Требуют небольшого хака в IE6-7 и аццких хаков в (к счастью, практически вымершем) FF2.

Ссылки про float-ы: раз (почти исчерпывающая), два. Про inline-block - например, вот (см. тж. комменты).

Еще была когда-то хорошая статья Томми Олссона (http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1), но сейчас его сайт лежит с ошибкой (нашелся только немецкий перевод).