float:设置浮动
浮动会使元素脱离普通文档流，使元素向左或向右移动，其周围的元素也会重新排布，
在布局中非常有用。
html：
<p>以下是图片的浮动设置：</p> <img src="image/follow-1.png"> <p>图片后文字：注意<p>是块级元素，元素前后有换行符。</p>
不设置浮动时浏览器显示如下：
设置左浮动float:left;后浏览器显示如下：
设置右浮动float:right;后浏览器显示如下：
clear:清除浮动
当有的元素不需要浮动时，但该元素周围有浮动的元素时，可是设置clear属性
clear:left;消除左浮动 clear:right;消除右浮动 clear:both;消除两边浮动
html:
<p>第一组图片：</p> <img src="image/follow-1.png"> <img src="image/follow-2.png"> <p>第二组图片：</p> <img src="image/follow-3.png"> <img src="image/follow-4.png"> <img src="image/follow-5.png">
CSS:
img { float:left; }
浏览器显示如下：
这样显得非常不美观，这时可以设置clear:both;
CSS:
img { float:left; } p { clear:both; }
浏览器显示如下：
这样显得更加美观好看，也由此可以看出浮动在布局中起到的作用。
【 微信扫一扫 】
