LabEx
ВходРегистрация

Техника clearfix в CSS

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы узнаем о технике clearfix в CSS. Эта техника используется для обеспечения того, чтобы элемент очищал своих дочерних элементов, которые имеют флоат. Мы исследуем, как реализовать эту технику в нашем коде, и обсуждаем ее ограничения. В конце этого практического занятия вы глубоко поймете, как использовать clearfix в своих CSS-верстах.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 95%. Он получил 100% положительных отзывов от учащихся.

Clearfix

В ВМ уже предоставлены index.html и style.css.

Чтобы обеспечить очистку дочерних элементов элемента при использовании float для построения макетов, можно использовать псевдо-элемент ::after и применить content: '', чтобы он мог влиять на макет. Кроме того, используйте clear: both, чтобы элемент очищал предыдущие левые и правые флоаты. Однако эта техника работает правильно только в том случае, если в контейнере нет нефлоатирующих дочерних элементов и нет высоких флоатов перед контейнером с clearfix, но в том же форматировочном контексте (например, флоатированные колонки). Например:

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.floated {
  float: left;
  padding: 4px;
}

Обратите внимание, что рекомендуется использовать более современный подход, такой как flexbox или сетевой макет, вместо использования float для построения макетов.

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по Clearfix. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.