今天我们分享关于文字环绕float的内容。在网页布局中，经常会用到图文混排。图文混排，就是文字环绕图片进行布局。在css中，使用浮动属性float可以设置元素的周围。语法：
  •  
float:取值；
float属性取值
属性值 说明
left 元素向左浮动
right 元素向右浮动
默认情况下，元素是不浮动的。上表中的属性是常用的，另外还有“none” 和“inherit”不常用，也不需要学习的。示例代码：
  •  
<html>  <head>    <title>文字环绕</title>    <style type="text/css">      img {float:left;}    </style>  </head>  <body>    <img src="images/1.jpg">    <p>很长的一段文字，此处省略一万字……</p>  </body></html>
浏览器预览效果后，会发现段落文字p与图片在一行，图片在网页左侧，感觉像是文字环绕着图片。
  •  
<html>  <head>    <title>文字环绕</title>    <style>      img { float:right;}    </style>  </head>  <body>    <img src="images/1.jpg">    <p>此处省略一万字……</p>  </body></html>
当float为right时，你会发现图片在网页最右侧，文字则在左侧，感觉图片漂浮在右侧。定义图片与文字间距：在上面的例子中，你发现文字与图片紧贴在一起，好像没有距离，使用margin属性就可以设定它们之间的距离了。margin指的是外边距，一般外边距有四个方向，分别是上外边距margin-top，右外边距margin-right，下外边距margin-bottom，左外边距margin-left。语法：
  •  
margin-top:像素值；margin-right:像素值；margin-bottom:像素值；margin-left:像素值；
示例代码：
  •  
<html>  <head>    <title>边距</title>    <style type="text/css">      img       {         float:left;        margin-right:200px;        border:1px solid black;      }    </style>  </head>  <body>    <img src="images/1.jpg">    <p>此处省略一万字……</p>  </body></html>
关于margin的更详细内容，我们在以后的css盒子模型中继续分享。本章总结：图片大小：
  •  
width:像素值；height:像素值；
图片边框：
  •  
border-width:像素值；border-style:属性值；border-color:颜色值；
简洁写法：
  •  
border: 1px solid black;
图片水平对齐方式：
  •  
text-align:属性值；
left，左对齐，center，居中对齐，right，右对齐，图片垂直对齐方式：
  •  
vertical-align:属性值；
top，顶部对齐，middel，中部对齐，baseline，基线对齐，bottom，底部对齐，文字环绕效果：
  •  
float：取值；
left，向左浮动，right，向右浮动。

文字环绕的使用-CSS入门基础（017）_html