float свойство определяет , должен ли элемент плавать.
clear , свойство используется для управления поведением плавающих элементов.
Поплавок недвижимости
В самом простом использовании, float свойство можно использовать , чтобы обернуть текст вокруг изображения.
Следующий пример указывает, что изображение должно плавать вправо в тексте:
clear собственности
clear , свойство используется для управления поведением плавающих элементов.
Элементы после плавающего элемента будет течь вокруг него. Чтобы избежать этого, используйте clear свойство.
clear свойство определяет , на которой стороны элемента плавающие элементы не могут плавать:
clearfix Hack - overflow: auto;
Если элемент является более высоким, чем элемент, содержащий его, и он плавал, она переливается снаружи контейнера.
Тогда мы можем добавить overflow: auto; к содержащим элемент , чтобы решить эту проблему:
Веб Пример компоновки
Обычно делать целые веб - макеты с помощью float свойства:
пример
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Попробуй сам " 
Еще примеры
Изображение с границы и поля , что плавает вправо в пункте
Пусть буя изображения вправо в параграфе. Добавить границу и поля к изображению.
Изображение с надписью , которая плавает вправо
Пусть изображение с надписью поплавка вправо.
Пусть первая буква абзаца поплавка влево
Пусть первая буква абзаца поплавка слева и стиль письма.
Создание горизонтального меню
Использование поплавка со списком гиперссылок для создания горизонтального меню.
Создание главной страницы без таблиц
Используйте поплавок, чтобы создать домашнюю страницу с верхнего колонтитула, левого и содержания основного содержания.
Все свойства CSS Float
| Имущество | Описание |
|---|---|
| clear | Указывает на какие стороны элемента, где плавающие элементы не разрешено плавать |
| float | Определяет, должен ли элемент плавать |
| overflow | Указывает, что происходит, если содержимое переполняет бокс элемента не давал |
| overflow-x | Указывает, что делать с левым / правым краями содержания, если оно переполняет область содержимого элемента |
| overflow-y | Указывает, что делать с верхними / нижними краями содержания, если оно переполняет область содержимого элемента |