- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-25 10:48:05
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">点击 "运行实例" 按钮查看在线实例
效果图：
CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
| 属性 | 描述 | 值 | CSS版本 |
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
推荐手册