Плавающий CSS

Флоут-блок может перемещаться влево или вправо, пока его внешняя граница не встретится с границей содержащего блока или другого флоут-блока.

Поскольку флоут-блок не находится в обычном потоке документа, блоки в обычном потоке документа ведут себя так, как будто флоут-блок не существует.

Плавающий CSS

Смотрите на следующий рисунок, когда рамка 1 флоутит вправо, она выходит из потока документа и перемещается вправо, пока правый край не встретится с правым краем содержащего блока:

Пример CSS флоата - элементы, плавающие вправо

Смотрите на следующий рисунок, когда рамка 1 флоутит влево, она выходит из потока документа и перемещается влево, пока левый край не встретится с левым краем содержащего блока. Поскольку она больше не находится в потоке документа, она не занимает места и фактически закрывает рамку 2, делая её невидимой.

Если все три рамки переместить влево, то рамка 1 будет флоутить влево до тех пор, пока она не встретится с содержащим блоком, а другие две рамки будут флоутить влево до тех пор, пока они не встретятся с предыдущим флоут-блоком.

Пример CSS флоата - элементы, плавающие влево

Как показано на рисунке, если содержащий блок слишком узок, чтобы вместить три флоут-элемента, расположенных в水平ном ряду, то другие флоут-блоки опускаются вниз, пока не появится достаточно места. Если высоты флоут-элементов различаются, то при опускании они могут быть «застрянуты» другими флоут-элементами:

Пример CSS флоата 2 - элементы, плавающие влево

Свойство float CSS

В CSS элементы浮动 с помощью свойства float.

Чтобы узнать больше о свойстве float, обратитесь к справочнику:Свойство float CSS。

Рамка строки и очистка

Рамка строки旁边 сжимается, чтобы предоставить место для флоут-бокса, и рамка строки окружает флоут-бокс.

Таким образом, создание флоут-бокса позволяет тексту обтекать изображение:

Линейные блоки вокруг плавающего блока

Чтобы предотвратить окружение флоут-бокса рамкой строки, нужно применить к этому блоку свойство clear. свойство clear может принимать значения left, right, both или none, что означает какие стороны рамки не должны соприкасаться с浮动ной рамкой.

Чтобы достичь этого эффекта, в элементе, который нужно очистить,верхний отступдобавить достаточное количество пространства, чтобы верхний край элемента опустился вертикально под浮动ной рамкой:

Пример свойства clear - приложение clear к линейному блоку

Это полезный инструмент, который позволяет окружающим элементам оставлять пространство для浮动ного элемента.

Давайте рассмотрим более подробно浮动 и очистку. Предположим, что вы хотите浮动 изображение слева от текстового блока и хотите, чтобы это изображение и текст были включены в другой элемент с фоновым цветом и рамкой. Вы можете написать следующий код:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>некоторый текст</p>
</div>

В этом случае arises проблема. Поскольку浮动ный элемент выходит из потока документа, div, окружающий изображение и текст, не занимает места.

Как сделать так, чтобы окружающий элемент визуально окружал浮动ный элемент? Необходимо применить clear в каком-то месте этого элемента:

Пример свойства clear - очищение пустых элементов

К сожалению, arose новая проблема, так как нет существующих элементов для применения очистки,所以我们 можем добавить пустой элемент и очистить его.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>некоторый текст</p>
<div class="clear"></div>
</div>

Таким образом, мы можем достичь желаемого эффекта, но для этого нужно добавить избыточный код. Часто элементы можно применить clear, но иногда приходится добавлять бессмысленные маркеры для макета.

Но у нас есть и другой способ, это浮动 контейнер div:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>некоторый текст</p>
</div>

Таким образом, мы получаем желаемый эффект. К сожалению, следующий элемент будет受到影响 от этого浮动ного элемента. Чтобы решить эту проблему, некоторые люди выбирают浮动 всего содержимого макета, а затем очищают эти浮动 с помощью соответствующих значимых элементов (часто это нижний колонтитул сайта). Это помогает уменьшить или消除不必要的 маркеров.

На самом деле, все страницы сайта CodeW3C.com используют эту технологию. Если вы откроете наш CSS файл, вы увидите, что мы очистили div в нижнем колонтитуле, а три div над ним浮动 влево.

Свойство clear CSS

Мы только что подробно обсуждали принцип работы CSS очистки и методы применения свойства clear. Если вы хотите узнать больше о свойстве clear, пожалуйста, обратитесь к справочнику:Свойство clear CSS。

Примеры плавания и очищения

Простое приложение свойства float
Плавающее изображение справа от одного абзаца.
Плавающее изображение с рамкой и границами справа от абзаца
Плавающее изображение справа от абзаца. Добавление рамки и границ к изображению.
Изображение с заголовком плавает справа
Плавающая изображение с заголовком справа
Плавающий начальный символ абзаца слева
Плавающий начальный символ абзаца слева, добавление стиля к этому символу.
Создание горизонтального меню
Создание горизонтального меню с помощью плавающих элементов с одной строкой ссылок.
Создание домашней страницы без таблиц
Использование плавающих элементов для создания домашней страницы с заголовком, подзаголовком, боковой навигацией и主要内容.
Удаление элементов с боковой стороны
Этот пример демонстрирует, как использовать элементы для удаления浮动 элементов с боковой стороны.