×
CSS 教程CSS 简介CSS 语法CSS Id 和 Class选择器CSS 创建CSS Backgrounds(背景)CSS Text(文本)CSS Fonts(字体)CSS 链接(link)CSS 列表样式(ul)CSS Table(表格)CSS 框模型CSS Border(边框)CSS 轮廓(outline)属性CSS Margin(外边距)CSS Padding(填充)CSS 分组和嵌套CSS 尺寸 (Dimension)CSS Display(显示)CSS Positioning(定位)CSS Float(浮动)CSS Align( 对齐)CSS 组合选择符CSS 伪类CSS 伪元素CSS 导航栏CSS 图片廊CSS 图像透明/不透明CSS 图像拼合技术CSS 媒体类型CSS 属性选择器CSS 总结CSS 实例

CSS3 教程

CSS3 教程CSS3 简介CSS3 边框(Borders)CSS3 背景CSS3 渐变CSS3 文本效果CSS3 字体CSS3 2D 转换CSS3 3D 转换CSS3 过渡CSS3 动画CSS3 多列CSS3 用户界面

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 语音参考 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值 CSS 颜色名 CSS 十六进制颜色 

CSS Float(浮动)



什么是CSS Float(浮动)?



CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动

Float(浮动),往往是用于图像,但它在布局时一样非常有用。


元素怎样浮动

元素的水平方向浮动意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或右。通常,这意味着尽所有的可能在所有包含元素的左侧或右侧的。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动,下面的文本流将环绕在它左边:

实例

img
{
float:right;
}

尝试一下 »


彼此相邻的浮动元素

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

在这里,我们已经对图片廊使用float属性:

实例

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

尝试一下 »


清除浮动 - 使用clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性

。clear属性指定其他元素双方都不能使用元素的浮动功能。

使用clear属性往文本中添加图片廊:

实例

.text_line
{
clear:both;
}

尝试一下 »


Examples

更多实例

为图像添加边框和边距并浮动到段落的左侧

让我们为图像添加边框和边距并浮动到段落的左侧

标题和图片向右侧浮动

让标题和图片向右侧浮动。

让段落的第一个字母浮动到左侧

改变样式,让段落的第一个字母浮动到左侧。

创建一个没有表格的网页

使用float创建一个网页页眉、页脚、左边的内容和主要内容。


所有CSS浮动属性

"CSS" 列中的数字表示不同的CSS版本 (CSS1 or CSS2)定义了该属性。

属性 描述 CSS
clear 指定不允许元素周围有浮动元素 left
right
both
none
inherit
1
float 指定Box是否可以浮动 left
right
none
inherit
1

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)