HTML\CSS → Как работает свойство clear в СSS

02 июня 2015HTML5

Свойство clear запрещает обтекание элемента.

clear:left — запрещено обтекание слева;
clear:right — запрещено обтекание справа;
clear:both — запрещено обтекание с обеих сторон;
clear:none — обтекание разрешено

Если после float-элемента расположен элемент с clear-обтеканием, то последний опускается под float-элемент. clear:both часто используют в конструкции под названием clearfix:

<div>
    <div class="float_left"></div>
    <div class="float_rigth"></div>
    <div style="clear:both"></div> 
</div>

HTML\CSS → Как работает float в CSS

02 июня 2015HTML5

Свойство float включает режим “обтекания” — блок прижимается к левому или правому краю родителя и ужимается по ширине под свое содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.

float:left — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
float:right — прижимает элемент к правому краю родителя, другие элементы обтекают его слева;
float:none — отключает режим обтекания и возвращает элементу нормальное поведение.

HTML\CSS → Сетки страниц на HTML5

02 июня 201529 ноября 2016HTML5

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

На сегодня существует несколько способов управлять потоком и строить сетки страниц, через:

float
inline-block
flexbox (новая технология)
табличную верстку (считается устаревшим);

HTML\CSS → Свойство z-index

02 июня 2015HTML5

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

Чем больше число z-index тем выше располагается блок.

Свойство работает для элементов, у которых position задано как absolute, fixed и relative. Таким образом, «относительный» элемент может перекрывать «абсолютный».

HTML\CSS → Позиционирование в CSS: static, relative, absolute, fixed

02 июня 2015HTML5

Свойство position задает режим позиционирования элементов.

1. Статическое. Значением по умолчанию является positon:static — элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе.

2. Относительное. Значение positon:relative — позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (свойствами top, right, bottom или left). Элемент остается в потоке документа и на самом деле никуда не смещается. Он остается в потоке ровно там же, где и был, а смещается визуальная копия блока (можно проверить увеличив его высоту или задав отступы).