购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 浮动 (Float)

CSS 浮动 (Float)
Float会使元素向左或向右移动,其周围的元素也会重新排列,常常用于图像,但它在布局时也一样非常有用
编辑:前端控 前端控 更新时间:2019-03-22 15:42:19

CSS Float(浮动)属性

Float会使元素向左或向右移动,其周围的元素也会重新排列,常常用于图像,但它在布局时也一样非常有用

元素怎样浮动的?

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

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

浮动元素之后的元素将围绕它;浮动元素之前的元素将不会受到影响

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
p
{
float:left;
}
</style>
</head>
<body>
<p>
<img src="images/logo.png">
html中文网提供大量免费、原创、高清的html视频教程,并定期举行公益html培训!可边学习边在线修改示例代码,查看执行效果!html从入门到精通,一站式html自学平台!
</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

彼此相邻的浮动元素

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

实例

ul
{
list-style: none;
}
li{
	width:100px;
	height: 30px;
	margin: 5px;
	border: 1px solid #ccc;
	float:left;
}
</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

清除浮动:clear

clear 属性指定元素两侧不能出现浮动元素

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

实例

<style>
img{
	float: left;
	clear: both;
}
</style>
</head>
<body>
	<img src="images/logo.png">
	<img src="images/logo.png">

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 5.jpg


CSS 中所有的浮动属性

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

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


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号