float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div.box{
background-color:green;
border:1px solid red;
width:600px;
height:auto;
padding:20px;
}
p{
text-indent:2em;
}
img{
float:right;
width:150px;
width:150px;
}
h3{
text-align:center;
}
</style>
</head>
<body>
<h1>float浮动属性实例</h1>
<div class="box">
<h3>浮动布局简介</h3>
<img src="img/tree.png"></img>
<p>最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。</p>
<p>
但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。之前的 fancy paragraph example 的课程展示了如何使用浮动创建一个有趣的drop-cap（首字下沉）效果。
</p>
<p>浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。</p>
</div>
</div>
</body>
</html>
运行效果：
评论