CSS
Поплавки

Синтаксис

• ясно: нет | левый | право | оба | inline-start | рядный конец;
• поплавок: левый | право | нет | inline-start | рядный конец;

замечания

Поплавок изображения внутри текста

Самое основное использование float - это перенос текста вокруг изображения. В приведенном ниже коде будут отображаться два абзаца и изображение, при этом второй абзац течет вокруг изображения. Обратите внимание, что он всегда является содержимым после того, как перемещаемый элемент перемещается вокруг перемещаемого элемента.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<img src="http://lorempixel.com/200/100/" />

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img {
  float:left;
  margin-right:1rem;
}

Это будет выход

Codepen Link

Простая комбинация столбцов с фиксированной шириной

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

HTML:

<div class="wrapper">

<div class="sidebar">
  <h2>Sidebar</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>

<div class="content">
  <h1>Content</h1>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</div>

</div>

CSS:

.wrapper {
  width:600px;
  padding:20px;
  background-color:pink;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.sidebar {
  width:150px;
  float:left;
  background-color:blue;
}

.content {
  width:450px;
  float:right;
  background-color:yellow;
}

Простая комбинация столбцов с фиксированной шириной

HTML:

<div class="wrapper">
  <div class="left-sidebar">
    <h1>Left Sidebar</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
  <div class="content">
    <h1>Content</h1>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
  </div>
  <div class="right-sidebar">
    <h1>Right Sidebar</h1>
    <p>Fusce ac turpis quis ligula lacinia aliquet.</p>
  </div>
</div>

CSS:

.wrapper {
  width:600px;
  background-color:pink;
  padding:20px;

  /* Floated elements don't use any height. Adding "overflow:hidden;" forces the
     parent element to expand to contain its floated children. */
  overflow:hidden;
}

.left-sidebar {
  width:150px;
  background-color:blue;
  float:left;
}

.content {
  width:300px;
  background-color:yellow;
  float:left;
}

.right-sidebar {
  width:150px;
  background-color:green;
  float:right;
}

Двухколоночный ленивый / жадный макет

Этот макет использует один плавающий столбец для создания двухколоночного макета без определенной ширины. В этом примере левая боковая панель «ленива», поскольку она занимает всего лишь столько места, сколько нужно. Другой способ сказать это, что левая боковая панель «обернута термоусадочной пленкой». Правильный столбец содержимого «жадный», поскольку он занимает все оставшееся пространство.

HTML:

<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>

CSS:

.sidebar {
  /* `display:table;` shrink-wraps the column */
  display:table;
  float:left;
  background-color:blue;
}

.content {
  /* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
  overflow:hidden;
  background-color:yellow;
}

скрипка

очистить собственность

Свойство clear напрямую связано с поплавками. Значения свойств:

• none - По умолчанию. Позволяет плавающие элементы с обеих сторон
• left - плавающие элементы не разрешены с левой стороны
• справа - плавающие элементы не допускаются с правой стороны
• оба - не допускаются плавающие элементы на левой или правой стороне
• initial - Устанавливает это свойство по умолчанию. Читайте об исходных
• inherit - Наследует это свойство от его родительского элемента. Читайте о наследовании

<html>
<head>
<style>
img {
    float: left;
}

p.clear {
    clear: both;
}
</style>
</head>
<body>

<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
<p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
<p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>

</body>
</html>

Clearfix

Ручка clearfix - популярный способ содержать поплавки (N. Gallagher aka @necolas)

Не следует путать с clear собственностью, clearfix этого понятия (что также связана с поплавками, таким образом, возможной путаница). Чтобы содержать поплавки , вы должны добавить .cf или .clearfix в контейнер ( родительский .cf и .clearfix этот класс с помощью нескольких правил, описанных ниже.

3 версии с немного отличающимися эффектами (источники: новый взлом micro clearfix Н. Галлахера и clearfix, загруженный TJ Koblentz):

Clearfix (с кратковременным сглаживанием оставшихся поплавков)

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

Clearfix также предотвращает свертывание верхнего края содержащихся поплавков

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix с поддержкой устаревших браузеров IE6 и IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen с эффектом clearfix

Другой ресурс: все, что вы знаете о clearfix, неверно (clearfix и BFC - Контекст блока форматирования, в то время как hasLayout относится к устаревшим браузерам IE6, возможно, 7)

Встроенный DIV с использованием float

Элемент div является элементом уровня блока, то есть он занимает всю ширину страницы, а братья и сестры помещают один ниже другого независимо от их ширины.

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

Вывод следующего кода будет

Мы можем сделать их в строке, добавив свойство float css в div .

HTML:

<div class="outer-div">
    <div class="inner-div1">
        <p>This is DIV 1</p>
    </div>
    <div class="inner-div2">
        <p>This is DIV 2</p>
    </div>
</div>

CSS

.inner-div1 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #337ab7;
    padding:50px 0px;
}
 
.inner-div2 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #dd2c00;
    padding:50px 0px;
}
 
p {
    text-align:center;
}

Codepen Link

Использование свойства переполнения для очистки поплавков

Установка значения overflow для hidden , auto или scroll к элементу очистит все поплавки внутри этого элемента.

Примечание: использование overflow:scroll всегда будет показывать overflow:scroll