Учимся работать с блочными элементами

Краткий конспект урока:

<div></div> - тег HTML. Блочный элемент, предназначенный для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей css. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Как и при использовании других блочных элементов (например, тег р), содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

float – свойство CSS. Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

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

clear - свойство CSS. Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Чаще всего используется конструкция: clear: both; - которая отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.

box-sizing - свойство CSS. Применяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Чаще всего используется конструкция: box-sizing: border-box; - свойства width и height включают в себя значения полей и границ, но не отступов (margin).