今天我们分享关于文字环绕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，向右浮动。
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
