Какое значение отображения имеет элемент со свойством float?

Question

[maxim_01]

Есть у нас допустим какой-нибудь тег строчный или блочный, не важно.
Пишем мы этому тегу

*{
    float:left;
}

Какое значение display будет у данного тега и почему?

Answer 1

[Андрей Токмаков]

https://habrahabr.ru/post/136588/
https://habrahabr.ru/post/142486/

Comments

[maxim_01]

Ссылки безцусловно полезные. Особенно первая где написаны правила float. Но там опять же не слова почему это так работает.

[Андрей Токмаков]

maxim_01: Почему красный цвет назвали красным? Вот так же и тут - потому что таким его сделали

[maxim_01]

Андрей Токмаков: Это уже какая-то константность, не люблю константы!

[Сергей Горячев]

Андрей Токмаков: При твоем сравнении с цветами, есть одна промашка. Дальтоники не видят красного цвета и запросто могут спорить с любым человеком %)))

[Андрей Токмаков]

maxim_01: А ни кто Вас и не спрашивал любите или нет, если Вы например хлеб не любите - это же значит что его продавать в магазине не будут.

[Андрей Токмаков]

Sergey Goryachev: Ну это уже баг браузера, нужны костыли для этого :)

[Александр Серяков]

если строчному элементу прописать float, то он автоматически станет блочным

[Сергей delphinpro]

Александр Серяков: А если ему дополнительно написать display: flex он внезапно станет flex-контейнером
или display: table - таблицей
А вот display: inline/inline-block уже не прокатит =)

[Александр Серяков]

Сергей: мой ответ заключался в применении свойства float к СТРОЧНОМУ элементу БЕЗ явного указания display

[Сергей delphinpro]

Александр Серяков: я наверное неправильно понял =) если "блочным" - значит в блочной модели, тогда правильно. если "блочным" имелось ввиду display:block то не правильно.

[Александр Серяков]

Сергей: 1 вариант, свойства display: block у него не добавится, но он будет вести себя как блок, например реагировать на вертикальный margin, даже если блоку явно задать display: inline https://jsfiddle.net/alexndb/4wemcfro/

[Сергей delphinpro]

Александр Серяков: всё-таки добавляется

[Александр Серяков]

Сергей: меня только смущает что он при display: block не расползается на всю доступную ширину take.ms/oSpWw

[Сергей delphinpro]

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

[Сергей delphinpro]

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

Answer 2

[Степан Крапивин]

в спецификации написано, что элемент c float это block

Comments

[maxim_01]

Да в спецификации это написано, но согласитесь, что если элемент имеет display:block; то он занимает всю ширину строки и не уступает место никому. Однако по непонятной причине если установить float:left/right; то мы вдруг увидем что блок начинает уступать место да мало того его размеры будут сопоставимы с размером содержимого. Вас это не удивляет противоречие?

[Сергей Горячев]

maxim_01: И что? Ради твоих суждений спецификацию переписать нужно теперь? Сказано - блок, значит блок.

[maxim_01]

Sergey Goryachev: Да при чем тут это? Не агрессируй! Я высказываю то что исходит из базовых принципов свойства display. Выходит что display:block; и float:left/right; - исключение!
P.S Спецификации переписываются и не раз, так что не волнуйся если разработчики посчитают нужным переписать то они перепишут, когда-нибудь.

[Сергей Горячев]

maxim_01: А пока не переписали, не вижу смысла спорить. Ты задал вопрос, тебе дали ответ. Ты же пытаешься переспорить и автора ответа и специаификацию.

[Степан Крапивин]

maxim_01: ну давайте размышлять логически.
Инлайн элемент - это элемент строки. Т.е. часть строки, не более. (извиняюсь за тавтологию)

Плавающее изображение (или любой другой блок) в тексте может занимать несколько строк. Это уже противоречит инлайновости.

Если не инлайн, значит блок (и не будем ёрничать про то что ещё есть display: table, list-item и т.д.)

[maxim_01]

Sergey Goryachev: Я не пытаюсь переспорить. Я лишь говорю что это странно. Не более!

Answer 3

[Евгений Карпов]

float - не меняет свойство display, каким элементом ты оперируешь, таким он и будет

Comments

[maxim_01]

В спецификации так не считают там вообще написано что элемент с float отличным со значением none будет display:block;

[Сергей delphinpro]

меняется

Answer 4

[Rsa97]

display: block
Исключение - блоки с абсолютным позиционированием, для которых свойство float игнорируется.

Answer 5

[Сергей delphinpro]

Плавающий блок выпадает из родительского потока элемента и создает собственный контекст форматирования.
Контекст по умолчанию блочный, это значит лишь то, что внутренние элементы ведут себя как потомки блока (т.е. самым обычным образом, как мы привыкли). Этот контекст можно изменить, как я написал выше на flex/table/grid.
Но сам блок останется плавающим блоком.

Что касается самого свойства display, то оно интересно себя ведет, но вполне логично.
inline/inline-block становится равным block
flex/inaline-flex становится равным flex
table/inaline-table становится равным table
т.е. приводится к блочной модели, но с учетом контекста.