Плавающие элементы

7.1 Свойство float

Плавающие элементы с использованием свойств float и clear были одним из первых методов для создания сложных макетов в веб-дизайне. Несмотря на то, что современные методы, такие как Flexbox и Grid, часто предпочтительнее, знание использования float и clear все еще важно для работы с устаревшими проектами или понимания основ CSS.

Свойство float

Свойство float позволяет элементу "плавать" влево или вправо, обтекаться текстом и другими элементами. Это свойство особенно полезно для создания макетов с колонками и обтеканием изображения текстом.

Синтаксис:

    
      .element {
        float: left; /* или right */
      }
    
  

Значения свойства float:

• left: элемент плавает влево, и последующие элементы обтекают его справа
• right: элемент плавает вправо, и последующие элементы обтекают его слева
• none: значение по умолчанию, элемент не плавает
• inherit: наследует значение от родительского элемента

Пример использования float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 Свойство clear

Свойство clear используется для управления поведением обтекания плавающих элементов. Оно позволяет предотвратить обтекание элемента плавающими элементами с определенной стороны.

Синтаксис:

    
      .element {
        clear: left; /* или right */
      }
    
  

Значения свойства clear:

• left: элемент не будет обтекаться слева
• right: элемент не будет обтекаться справа
• both: элемент не будет обтекаться ни слева, ни справа
• none: значение по умолчанию, элемент обтекается с обеих сторон

Пример использования clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Пример техники "clearfix":

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Плюсы и минусы использования float

Плюсы

1. Простота использования:
   • Легкость создания простых макетов с помощью float
2. Широкая поддержка браузерами:
   • float поддерживается всеми современными браузерами, включая старые версии
3. Гибкость в макетах:
   • Возможность создания различных макетов, включая обтекание изображений текстом и создание многострочных макетов

Минусы

1. Трудности в управлении сложными макетами:
   • float может создавать проблемы при создании сложных макетов, особенно когда требуется выравнивание по вертикали
2. Проблемы с высотой родительских элементов:
   • Родительские элементы могут "схлопываться", если все их дочерние элементы плавают. Это требует использования таких техник, как clearfix, для исправления
3. Устаревание:
   • Современные методы, такие как Flexbox и Grid, предоставляют более мощные и гибкие способы создания макетов

Пример создания макета с помощью float и clear

Создание двухколоночного макета с помощью float и clear.

В этом примере создается двухколоночный макет с боковой панелью (.sidebar) и основным содержимым (.main). Элементы .sidebar и .main плавают влево, а элемент .footer с clear: both; предотвращает обтекание.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

Использование float и clear остается важным инструментом в арсенале веб-разработчиков, несмотря на появление более современных методов. Понимание их работы помогает в поддержке и обновлении старых проектов, а также в создании простых макетов. Современные методы, такие как Flexbox и Grid, часто предпочтительнее для создания сложных и адаптивных макетов, но знание float и clear по-прежнему актуально.

1

Задача

Модуль 1: Web Core, 11 уровень, 6 лекция

Недоступна

Создание плавающего элемента

Создание плавающего элемента

Открыть

1

Задача

Модуль 1: Web Core, 11 уровень, 6 лекция

Недоступна

Применение свойства clear

Применение свойства clear

Открыть