Понимание CSS Float

Использование CSS-свойства float для разработки макетов веб-страниц

Свойство CSS является очень важным свойством для макета. Это позволяет вам позиционировать дизайн веб-страниц именно так, как вы хотите, чтобы они отображались, но чтобы использовать его, вы должны понимать, как он работает.

В таблице стилей CSS свойство float выглядит так:

 .right {float: right; } 

Это говорит браузеру, что все с классом «право» должно быть смещено вправо.

Вы бы назначили это так:

 class = "right" /> 

Что можно плавать с помощью свойства CSS Float?

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

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

Где они плавают?

Вы можете перемещать элементы вправо или влево. Любой элемент, который следует за плавающим элементом, будет обтекать плавающий элемент на другой стороне.

Например, если вы перемещаете изображение влево, любой текст или другие элементы, следующие за ним, будут обтекать его вправо. И если вы перемещаете изображение вправо, любой текст или другие последующие элементы будут обтекать его слева. Изображение, помещенное в блок текста без примененного к нему стиля с плавающей точкой, будет отображаться, однако браузер настроен на отображение изображений. Обычно это с первой строкой следующего текста, отображаемой внизу изображения.

Как далеко они будут плавать?

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

Элемент

 DIV 

слева:

  • Если плавающий элемент не имеет предопределенной ширины, он займет столько горизонтального пространства, сколько требуется и доступно, независимо от плавающего элемента.

Заметка

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

  • Если элемент контейнера является элементом HTML, плавающий элемент
     DIV 

    будет располагаться на левом поле страницы.

  • Если элемент контейнера сам по себе содержит что-то еще, плавающий элемент

     DIV 

    будет находиться на левом поле контейнера.

  • Вы можете вкладывать плавающие элементы, и это может привести к тому, что поплавок окажется в удивительном месте. Например, это число с плавающей точкой

     DIV 

    внутри плавающего справа

     DIV 

    .

  • Плавающие элементы будут сидеть рядом друг с другом, если в контейнере есть место. Например, этот контейнер имеет три элемента

     DIV 

    шириной 100px, размещенных в контейнере шириной 400px.

Вы даже можете использовать поплавки для создания макета фотогалереи. Вы помещаете каждую миниатюру (она работает лучше всего, когда все они одного размера) в

 DIV 

с надписью и плавающими элементами

 DIV 

в контейнере. Независимо от того, насколько широко окно браузера, миниатюры будут выстраиваться равномерно.

Выключение поплавка

Когда вы знаете, как заставить элемент плавать, важно знать, как отключить его. Вы выключаете float с помощью свойства clear CSS. Вы можете очистить левые, правые или оба:

 очистить: слева; 
очистить: вправо;
очистить: оба;

Любой элемент, для которого вы установили свойство clear, появится под элементом, который перемещается в этом направлении.

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

HTML (повторите этот абзац):

 Duis aute irure dolor sed do eiusmod tempor ведет к переоценке в волюте. Cupidatat не является независимым, ut labore et dolore magna aliqua. 

CSS (для перемещения изображений влево):

 img.float {float: left; 
clear: left;
margin: 5px;
}

И справа:

 img.float {float: right; 
clear: right;
margin: 5px;
}

Использование Floats для макета

Как только вы понимаете, как

Свойство

 float 

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

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

Если вы знаете ширину (проценты в порядке) разделов макета, вы можете использовать

Свойство

 float 

размещает их там, где они принадлежат на странице. И хорошо, что вам не нужно беспокоиться о том, что блочная модель отличается для Internet Explorer или Firefox.

Оцените статью
Solutics.ru
Добавить комментарий