Не работает адекватно float, объясните пару вещей?

Question

[germankraut]

Извините не понял как назвать суть вопроса, их тут ряд.
1)Почему не выстраивается по середине див container?

2)Почему при задании дивам в контейнере внутреннего отступа(padding) в 20px, происходит то что происходит, а именно каждый див перестает занимать настоящие проценты от всего род. блока, начинает "скукоживаться"

3)В песочнице jsfiddle этого нет, но браузер хром рисует мне непонятно откуда берущийся див в самом левом верху с примененной границей к div (border: 4px solid rgb(227, 232, 0)) Почему? Откуда? Объясните.

4) Я уже использую float, но у меня есть цель выровнять контент, т.е. слово текст в каждом диве, по середине. Используя флексы я бы сделал это в три строчки, но как тут быть? Их вроде нельзя сочитать, либо я чего то не знаю. Как текст выровнять по горизонтали если флоаты юзаешь?

https://jsfiddle.net/mrhp59g3/1/

Comments

[Ankhena]

Извините, вы собираетесь на машине времени в прошлый век?
Какая цель в использовании флоатов не по назначению сейчас?

[germankraut]

Ankhena, я для себя, в целом, для понимания. Обтекание слышал полезным бывает

[Ankhena]

1)Почему не выстраивается по середине див container?

Потому что вы задали ему float.
Определитесь, он должен быть по центру или слева?

2)Почему при задании дивам в контейнере внутреннего отступа(padding) в 20px, происходит то что происходит, а именно каждый див перестает занимать настоящие проценты от всего род. блока, начинает "скукоживаться"

По умолчанию размеры блока складываются из ширины, внутренних отступов и границ.
Почитайте про свойство box-sizing

3)В песочнице jsfiddle этого нет, но браузер хром рисует мне непонятно откуда берущийся див в самом левом верху с примененной границей к div (border: 4px solid rgb(227, 232, 0)) Почему? Откуда? Объясните.

Сложно сказать. Возможно, какое-то расширение хрома или вы не точно воспроизводите код в песочнице.

4) Я уже использую float, но у меня есть цель выровнять контент, т.е. слово текст в каждом диве, по середине. Используя флексы я бы сделал это в три строчки, но как тут быть? Их вроде нельзя сочитать, либо я чего то не знаю. Как текст выровнять по горизонтали если флоаты юзаешь?

Использовать флексы.

[Ankhena]

germankraut,

Обтекание слышал полезным бывает

Да этих целей, да.
Но не так, как вы их используете в вопросе.

[germankraut]

Ankhena, Извините, а как тогда? Можете пример маленький привести, пожалуйста?Или ссылку дать где почитать, в гугле чет не могу найти про обтекание флоата

[Ankhena]

germankraut, текст обтекает картинку.

Или ссылку дать где почитать, в гугле чет не могу найти про обтекание флоата

Я что-то с трудом в это верю.
На MDN 100%