CSS 浮动 (Float)

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

前端控更新时间：2019-03-25 10:48:05

具体内容
相关视频
相关知识
最新评论

CSS Float(浮动)属性

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

元素怎样浮动的？

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

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

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

实例

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

运行实例 »

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

效果图：

彼此相邻的浮动元素

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

实例

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

推荐手册

CSS 浮动 (Float)

实例

实例

实例