swibong
@swibong
No system is safe.

Использование float. Куда пропал блок?

Добрый день.

Начал разбираться с позиционированием, в частности с float.

https://jsfiddle.net/webrapist/6mponmp3/1/

Где второй box? Почему его не видно? И третий box не понятно почему расположен ниже, хотя они все могут уместиться на одной строке.
  • Вопрос задан
  • 254 просмотра
Пригласить эксперта
Ответы на вопрос 7
@ch3rry
Зачем, если есть flexbox?
Ответ написан
vlakhvo
@vlakhvo
front-end developer
Второй перекрывает первый, так как "флоаченые" выпадают из потока вывода.

Третий уехал т.к. второй элемент блочный (display: block) и занимает всю ширину. (Первый как мы помним выпал из потока, если бы не выпал то тоже бы выталкивал)

display: inline-block; для всех трех блоков должен исправить положение.

https://jsfiddle.net/ekhjrpr6/
Ответ написан
maxminimus
@maxminimus
просто или ничего
время флоатов ушло
это прошлый век
Ответ написан
@kir_vesp
Web Developer
box1 и box2 наложились друг на друга. Чтобы избежать наложения и расместить div-ы в одной строке, пропишите им свойство display: inline-block;
https://jsfiddle.net/6mponmp3/2/
Ответ написан
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Второй бокс за первым. Третий расположен ниже второго, т.к. у второго не указан флота и он занимает всё ширину. Если второму боксу назначить float: left, то всё будет ровно.
https://jsfiddle.net/6mponmp3/3/
Ответ написан
zooks
@zooks
Frontend и Django
Так назначьте на него рамку и какой-нибудь float. Сразу увидите.
А вообще такие вещи лучше делать через Flex.
Ответ написан
@0leg5ergeev
Самые глупые вопросы здесь задаю я
https://jsfiddle.net/6mponmp3/4/

научитесь пользоваться инструментами разрабочика
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы