float

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

Для примера будем использовать два блочных элемента и смотреть взаимодействие между ними.

Возьмём стандартный случай. Сначала выведем картинку, а потом параграф текста.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, at impedit expedita iure pariatur. Eligendi, ullam deleniti perspiciatis iure voluptas iusto ab consequuntur! Repudiandae, nemo voluptate ut quasi eum reiciendis.

Стандартное поведение. Сначала идёт один блок, затем снизу второй.

Применим float к изображению.


<img src="../images/css.jpg" style="float:left">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, eveniet, pariatur, accusantium omnis sapiente atque ipsa quo dolores consectetur reiciendis repudiandae accusamus maiores! Assumenda, nihil fuga voluptas consequuntur amet perferendis.

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

Это справедливо и для значения right.

Если по каким-то причинам вам нужно отменить такое поведение для второго параграфа, то на помощь приходит clear со значениями left, right или both. На практике часто используют последнее значение, чтоб наверняка отменить обтекание, не вспоминая, какое нужно отменить - левое или правое.


<p style="clear:left">...</p>

Это основные моменты, которые нужно запомнить.

Часто создаётся отдельный div с подобным стилем и вставляется в нужных местах для отмены обтекания.

Применяется свойство очень широко. Самый простой пример - c DT-DD. Пример без настроек

Барсик: Умный котик
Мурзик: Красивый котик
Рыжик: Хитрый котик

Применим правила.


dt{
	float: left;
}

Барсик: Умный котик
Мурзик: Красивый котик
Рыжик: Хитрый котик

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

Барсик: Умный котик
Мурзик: Красивый котик
Рыжик: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, sint omnis maxime repudiandae praesentium. Vel, maiores, ea, nemo, dolorem maxime possimus iure commodi quibusdam alias error nisi perspiciatis beatae itaque!

В таком случае стоит лишь добавить:


dd{
	overflow: hidden;
}

А также можно ограничить ширину текста у определений. Тогда получится следующий стиль.


dl{
	width: 500px;
}
dt{
	float: left;
}
dd{
	overflow: hidden;
}

Барсик: Умный котик
Мурзик: Красивый котик
Рыжик: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, sint omnis maxime repudiandae praesentium. Vel, maiores, ea, nemo, dolorem maxime possimus iure commodi quibusdam alias error nisi perspiciatis beatae itaque!

float

Реклама