Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Layout - поплавок и ясно


float свойство определяет , должен ли элемент плавать.

clear , свойство используется для управления поведением плавающих элементов.





Поплавок недвижимости

В самом простом использовании, float свойство можно использовать , чтобы обернуть текст вокруг изображения.

Следующий пример указывает, что изображение должно плавать вправо в тексте:

пример

img {
    float: right;
    margin: 0 0 10px 10px;
}
Попробуй сам "

clear собственности

clear , свойство используется для управления поведением плавающих элементов.

Элементы после плавающего элемента будет течь вокруг него. Чтобы избежать этого, используйте clear свойство.

clear свойство определяет , на которой стороны элемента плавающие элементы не могут плавать:

пример

div {
    clear: left;
}
Попробуй сам "

clearfix Hack - overflow: auto;

Если элемент является более высоким, чем элемент, содержащий его, и он плавал, она переливается снаружи контейнера.

Тогда мы можем добавить overflow: auto; к содержащим элемент , чтобы решить эту проблему:

пример

.clearfix {
    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 Указывает, что делать с верхними / нижними краями содержания, если оно переполняет область содержимого элемента