float 属性定义元素再哪个方向的浮动。
float css的一种属性，它的主要属性值为：左浮动（left）、不浮动（none）、右浮动（right）以及继承父元素浮动（inherit）。
语法：float: none | left | right | inherit;
简单操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
div{
width: 600px;
height: 300px;
border: 2px solid green;
}
.float{
float:left;
margin: 10px;
width: 400px;
height: 90%;
}
.around {
padding: 10px;
text-indent: 2em;
line-height: 22px;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<img class="float" src="v3_hot.png" />
<p class="around">
侠课岛是优秀的互联网工作技能在线学习网站，专注于制作大量精品短视频和图文实战教程，内容由一线大牛策划制作，系统化，短小精炼，朴素实用，主要有：前端开发教程，后端开发教程，Node.js，PHP开发，Python开发，电商设计，产品运营，办公技能等精品独家原创教程。
</p>
</div>
</body>
</html>图片左浮动，img元素设置了 float:left; 之后会脱离文档流而居于左侧存在，这时候的p元素则是环绕图片居于右侧：
将上面的浮动改成 float:right;：
无论是块级元素还是行内级元素，一旦存在浮动，都会生成一个块级框，但是浮动元素的旁边是允许放置其他元素的。
简单示例：
<style>
.div div{
color: white;
width: 200px;
height: 100px;
}
</style>
<div class="div">
<div style="background: green;">one</div>
<div style="background: red;">two</div>
<div style="background: blue;">three</div>
<p>
侠课岛是优秀的互联网工作技能在线学习网站，专注于制作大量精品短视频和图文实战教程，内容由一线大牛策划制作，系统化，短小精炼，朴素实用，主要有：前端开发教程，后端开发教程，Node.js，PHP开发，Python开发，电商设计，产品运营，办公技能等精品独家原创教程。
</p>
</div>在上面代码的基础上，当使用 float:none; 时或者不使用浮动时，元素处于标准流中，如图所示：
在上面代码的基础上，当在div1中使用右浮动 float:right; 时，div1脱离标准流，离开原有位置，然后它之后的元素会依次往前补充原来的位置，如图所示：
同样是在原基础代码上，当在div1上使用左浮动 float:left; 时，div1脱离标准流，后面元素会占领原有位置，只是它会和某些元素重叠，因此后面的元素就会被覆盖了，如图所示：
关于浮动的认识我们可以更深入，这里就只是简单的基本介绍了一下。
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
