Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

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

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

CSS Float (плавающая)

Что такое CSS Float (с плавающей точкой)?



CSS Float (плавающий), элемент будет двигаться влево или вправо, элементы вокруг него будут перестроены.

Float (плавающая), часто используется для изображений, но это очень полезно, когда такой же расклад.


Как плавающий элемент

Горизонтальный плавающий элемент, означает, что элемент может двигаться только влево и вправо и не может двигаться вверх и вниз.

Плавающий элемент будет пытаться двигаться влево или вправо, пока его внешний край через границу или другой ящик, содержащий плавающее окно до сих пор.

Элементы после плавающего элемента будет фокусироваться на нем.

Элементы перед плавучего элемента не будут затронуты.

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

примеров

img
{
float:right;
}

Попробуйте »


Плавающие элементы рядом друг с другом

Если поместить несколько плавающих элементов, вместе взятые, если есть место, он будет находиться рядом друг с другом.

Здесь мы используем флоат свойство картинной галереи:

примеров

.thumbnail
{
плавать: слева;
ширина: 110px;
высота: 90px;
Запас: 5px;
}

Попробуйте »


Clear флоат - Используйте кнопку Clear

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

ясно атрибут указывает элемент не может появиться на обеих сторонах плавающего элемента.

Используйте ясный свойства текста, чтобы добавить картинная галерея:

примеров

.text_line
{
clear:both;
}

Попробуйте »


примеров

Другие примеры

Левое изображение добавить границы и поля и поплавки пункта

Давайте добавим границы изображения и поля и пункт с плавающей точкой слева

Название и фотографии к правому поплавка

Пусть название и фотографии к правому поплавка.

Пусть первая буква абзаца поплавка влево

Измените стиль так, что первая буква абзаца поплавка влево.

Не создать страницу с таблицей

Используйте поплавок, чтобы создать заголовок страницы, колонтитул, левое содержание и основное содержание.


Вся недвижимость CSS с плавающей точкой

Колонка "CSS" указывает количество различных версий CSS (CSS1 или CSS2) определяет свойство.

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1