Макет CSS - плавание и очистка

Макет CSS - плавание и очистка

CSS float Атрибут определяет, как элемент плавает.

CSS clear Атрибут определяет, какие элементы могут плавать около элементов для очистки и на какой стороне.

Атрибут float

float Атрибут используется для позиционирования и форматирования содержимого, например, чтобы изображение плавало влево к тексту в контейнере.

float Атрибут может принимать одно из следующих значений:

  • left - элемент будет плавать слева от его контейнера
  • right - элемент будет плавать справа от его контейнера
  • none - элемент не будет плавать (будет отображаться в том месте текста, где он только что появился). Значение по умолчанию.
  • inherit - элемент наследует значение float от своего родителя

Самый простой способ использования -float Эта атрибут可实现（在报纸上）效果，в котором текст окружает изображение.

Пример - float: right;

В следующем примере указывается, что изображение должно быть в тексте и плавать направо:

Апельсин

Ведущие учебные материалы по веб-технологиям - все бесплатно. В CodeW3C.com вы можете найти все необходимые учебные материалы по созданию веб-сайтов. От основ HTML до CSS, включая продвинутые XML, SQL, JS, PHP.

Наш справочник охватывает все аспекты веб-технологий. Включая стандарты W3C: HTML, CSS, XML. А также другие технологии, такие как JavaScript, PHP, SQL и т.д.

В CodeW3C.com мы предоставляем тысячи примеров. Используя наш онлайн-редактор, вы можете редактировать эти примеры и экспериментировать с кодом.

Пример

img {
  float: right;
}

Попробуйте сами

Пример - float: left;

В следующем примере указывается, что изображение должно быть в тексте:ВлевоПлавание:

Апельсин

Ведущие учебные материалы по веб-технологиям - все бесплатно. В CodeW3C.com вы можете найти все необходимые учебные материалы по созданию веб-сайтов. От основ HTML до CSS, включая продвинутые XML, SQL, JS, PHP.

Наш справочник охватывает все аспекты веб-технологий. Включая стандарты W3C: HTML, CSS, XML. А также другие технологии, такие как JavaScript, PHP, SQL и т.д.

В CodeW3C.com мы предоставляем тысячи примеров. Используя наш онлайн-редактор, вы можете редактировать эти примеры и экспериментировать с кодом.

Пример

img {
  float: left;
}

Попробуйте сами

Пример - No float

В данном примере, изображение будет отображаться в том месте текста, где оно только что появилось (float: none;):

Апельсин Ведущие учебные материалы по веб-технологиям - все бесплатно. В CodeW3C.com вы можете найти все необходимые учебные материалы по созданию веб-сайтов. От основ HTML до CSS, включая продвинутые XML, SQL, JS, PHP. Наш справочник охватывает все аспекты веб-технологий. Включая стандарты W3C: HTML, CSS, XML. А также другие технологии, такие как JavaScript, PHP, SQL и т.д. В CodeW3C.com мы предоставляем тысячи примеров. Используя наш онлайн-редактор, вы можете редактировать эти примеры и экспериментировать с кодом.

Пример

img {
  float: none;
}

Попробуйте сами

Дополнительное чтение

Дополнительная литература:Флоат CSS