CSS Layout - float and clear
Свойство CSS float указывает, как элемент должен плавать.
Свойство CSS clear указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
Свойство float
Свойство float используется для позиционирования и компоновки на веб-страницах.
Свойство float может иметь одно из следующих значений:
- left - Элемент плавает слева от контейнера
- right - Элемент плавает справа от контейнера
- none - Элемент не плавает (будет отображаться только там, где это происходит в тексте). Это значение по умолчанию
- inherit - Элемент наследует значение float родительского элемента
In its simplest use, the float property can be used to wrap text around images.
Пример-float: вправо;
В следующем примере указывается, что изображение должно быть размещено в тексте справа :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример
img {
float: right;
}
Пример-float: левый;
В следующем примере показано, что изображение должно плавать в тексте слева :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример
img {
float: left;
}
Пример-без поплавка
В следующем примере изображение будет отображаться именно там, где оно происходит в тексте (float: нет;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример
img {
float: none;
}
Свойство Clear
Свойство clear указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
Свойство clear может иметь одно из следующих значений:
- none - Позволяет использовать плавающие элементы с обеих сторон. Это значение по умолчанию
- left - С левой стороны не допускается плавающие элементы
- right- С правой стороны не разрешены плавающие элементы
- both - Плавающие элементы не разрешены ни слева, ни справа Стороне
- inherit - элемент наследует значение Clear родительского элемента
Наиболее распространенным способом использования свойства clear является использование float
свойства элемента.
При очистке поплавков, вы должны соответствовать ясно к поплавку. Если элемент плавает влево, то вы должны очистить влево. Плавающий элемент будет продолжать плавать, но очищенный элемент будет отображаться под ним на веб-странице.
Следующий пример очищает поплавок влево. Означает, что на левой стороне (Div) не разрешены плавающие элементы:
Пример
div {
clear: left;
}
Clearfix Hack
Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера.
Without Clearfix
With Clearfix
После этого мы можем добавить overflow: auto; к содержащему элементу для того чтобы зафиксировать эту проблему:
Пример
.clearfix {
overflow: auto;
}
Переполнение: Auto clearfix работает хорошо, пока вы в состоянии держать контроль над полями и обивка (иначе вы можете увидеть полосы прокрутки). новый, современный clearfix Hack тем не менее, является более безопасным в использовании, и следующий код используется для большинства веб-страниц:
Пример
.clearfix::after {
content: "";
clear: both;
display: table;
}
Вы узнаете больше о псевдо-элементе ::after в более поздней главе.
Изображения бок о бок
с float свойство, легко плавать изображения бок о бок:
Пример
.img-container {
float: left;
width: 33.33%; /* three
containers (use 25% for four, and 50% for two, etc) */
padding:
5px; /* if you want space between the images */
}
Navigation Menu
Используйте float со списком гиперссылок для создания горизонтального меню:
Пример
Пример веб-макета
Также общепринято делать целые веб-макеты с помощью свойства float:
Пример
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
Другие примеры
Изображение с границей и полями, плавающими вправо в абзаце
Пусть изображение поплавок вправо в абзаце. Добавьте границы и поля к изображению.
Изображение с надписью, плавающей вправо
Пусть изображение с надписью поплавок вправо.
Пусть первая буква абзаца поплывет влево
Пусть первая буква абзаца поплавок влево и стиль буквы.
Создание веб-сайта с плавающей точкой
Используйте float для создания домашней страницы с навигационной, колонтитулом, левым содержимым и основным содержимым.
Все свойства float CSS
| Свойство | Описание |
|---|---|
| clear | Указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны |
| float | Указывает, как элемент должен плавать |
| overflow | Указывает, что происходит, если содержимое переполнено полем элемента |
| overflow-x | Указывает, что делать с левыми/правыми краями содержимого, если оно переполнено областью содержимого элемента |
| overflow-y | Указывает, что делать с верхними/нижними краями содержимого, если оно переполнено областью содержимого элемента |