Всем привет! И это вторая статья на тему того, как я изучал CSS.
И в этой статье мы разберем как работает функция FLOAT
Float - задает расположение элемента страницы по левому или правому краю.
Пример:
float:left; Выравнивает элемент по левому краю
float:right; Выравнивает элемент по правому краю
float:none; Обтекание элемента не задается
float:inherit; Применяет значение родителя
Так же нельзя использовать на одном селекторе два значения этого свойства. Они просто напросто не будут работать.
Если элемент выравнивается по левому краю то другие элементы будут обтекать его справа:
HTML:
<div class="left">
ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН
ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН
ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН ПРИМЕР ТЕКСТА НОМЕР ОДИН
ПРИМЕР ТЕКСТА НОМЕР ОДИН
</div>
<div>
SDSDSDDSDDSDSDSDSDDSDSDSD
SDSDSDDSDDSDSDSDSDDSDSDSDSDDSDS
SDDSDSDSDSDSDSDSADSDSDSD
SDSDSDDSDDSDSDSDSDDSDSDSDSSDD
SDSDSDSD
</div>
CSS:
.left{
float: left;
background: $ffa;
border: 1px solid black;
padding: 10px;
margin-right: 20px;
width: 20%;
}
Вот что получилось:
Вот что будет если поменять float: left на float: right