Что понятно и в CSS и как использовать псевдоэлемент ::after в помощь
В предыдущей статье мы уже научились использовать поплавок. Поскольку все блоки уже удалены из обычного потока, div-оболочка имеет только заполнение. Ящики больше не занимают высоту div.
Если мы хотим, чтобы блоки по-прежнему выглядели внутри div-обертки, нам нужно использовать clear float.
Подписывайтесь на нас:
YouTube: https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww?sub_confirmation=1
Среда: https://ckmobile.medium.com/
Удеми: https://www.udemy.com/user/cyruschan2/
Linkedin: https://www.linkedin.com/company/ckmobi/
Телеграмма: https://t.me/ckmobi
Твиттер: https://twitter.com/ckmobilejavasc1
Очистить поплавок
Чтобы узнать, что такое clear float, лучше продублировать больше ящиков.
<body> <div class="wrapper"> <div class="box" style="background-color: blue;float:left; "></div> <div class="box" style="background-color: blue;float:left;"></div> <div class="box" style="background-color: red; float:left; "></div> <div class="box" style="background-color:orange; float:left;"></div> <div class="box" style="background-color:orange; float:left;"></div> </div> </body>
Теперь веб-страница будет выглядеть так.
Если мы удалим float, оставшийся в красном поле. А также добавьте clear:both во встроенный стиль. Веб-страница будет выглядеть так.
Это означает, что никакие другие элементы не занимают место слева и справа от красного прямоугольника.
Вернуться к исходному вопросу
Как мы можем сделать веб-сайт таким, чтобы 3 поля находились внутри div-оболочки?
Во-первых, нам нужно вернуться к исходному коду.
<body> <div class="wrapper"> <div class="box" style="background-color: blue;float:left "></div> <div class="box" style="background-color: red;float:left;"></div> <div class="box" style="background-color:orange; float:left"></div> </div> </body>
Решение заключается в том, чтобы вместо создания еще одного блока и добавления прозрачного плавающего стиля мы добавили пустой элемент div. Затем нам нужно добавить clear:both в div.
<body> <div class="wrapper"> <div class="box" style="background-color: blue; float:left "></div> <div class="box" style="background-color: red; float:left;"></div> <div class="box" style="background-color:orange; float:left"></div> <div style="clear:both;"></div> </div> </body>
Пустой div не позволяет другим элементам занимать место слева или справа.
Этот метод должен добавить ненужный код. Лучший способ сделать это — использовать псевдоэлементы.
Мы удаляем этот пустой div.
<body> <div class="wrapper"> <div class="box" style="background-color: blue; float:left "></div> <div class="box" style="background-color: red; float:left;"></div> <div class="box" style="background-color:orange; float:left"></div> </div> </body>
В то же время внутри style.css добавьте следующее
.wrapper::after{
content: '';
display: block;
clear:both;
}
Результат будет таким же, ::after создает псевдоэлемент, который является последним дочерним элементом div-оболочки. Он сделал ту же работу, что и мы раньше.
Подписывайтесь на нас:
YouTube: https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww?sub_confirmation=1
Среда: https://ckmobile.medium.com/
Удеми: https://www.udemy.com/user/cyruschan2/
Linkedin: https://www.linkedin.com/company/ckmobi/
Телеграмма: https://t.me/ckmobi
Твиттер: https://twitter.com/ckmobilejavasc1
