Блочно-строчные элементы ведут себя как текст, поэтому если в коде есть пробел между элементами, то он отображается и на странице. Этот пробел часто увеличивает отступы между элементами и они не помещаются в родительский блок в одну строку, хотя по размерам должны бы.
Решить проблему можно несколькими способами. Пример:
1. Убрать пробелы:
<ul>
<li>
Один</li><li>
Два</li><li>
Три</li>
</ul>
Свойство 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>
Свойство float включает режим “обтекания” — блок прижимается к левому или правому краю родителя и ужимается по ширине под свое содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.
float:left — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
float:right — прижимает элемент к правому краю родителя, другие элементы обтекают его слева;
float:none — отключает режим обтекания и возвращает элементу нормальное поведение.
Типичный веб-сайт состоит из блока меню, блока с основным содержанием, боковых колонок, футера. Эти блоки могут быть расположены друг под другом, в несколько колонок или еще сложнее. Такое взаимное расположение основных блоков сайта и называют сеткой. Сетки бывают фиксированной ширины, тянущиеся, адаптивные и т.д.
На сегодня существует несколько способов управлять потоком и строить сетки страниц, через:
Несколько «абсолютных» блоков могут перекрывать друг друга. По умолчанию выше оказывается тот блок, который расположен дальше в коде. C помощью свойства z-index можно управлять тем, как перекрываются блоки.
Чем больше число
z-indexтем выше располагается блок.
Свойство работает для элементов, у которых position задано как absolute, fixed и relative. Таким образом, «относительный» элемент может перекрывать «абсолютный».