ホームページ > 記事 > ウェブフロントエンド > CSSフロートの設定とクリア
float:设置浮动
浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>以下是图片的浮动设置:<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-1.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>图片后文字:注意<span style="color: #ff0000;"><</span>p<span style="color: #ff0000;">></span>是块级元素,元素前后有换行符。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
不设置浮动时浏览器显示如下:
设置左浮动float:left;后浏览器显示如下:
设置右浮动float:right;后浏览器显示如下:
clear:清除浮动
当有的元素不需要浮动时,但该元素周围有浮动的元素时,可是设置clear属性
clear:left;消除左浮动 clear:right;消除右浮动 clear:both;消除两边浮动
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>第一组图片:<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-1.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-2.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>第二组图片:<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-3.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-4.png"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="image/follow-5.png"</span><span style="color: #0000ff;">></span>
CSS:
<span style="color: #800000;">img </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>; }
浏览器显示如下:
这样显得非常不美观,这时可以设置clear:both;
CSS:
<span style="color: #800000;">img </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>; } p { clear:both; }
浏览器显示如下:
这样显得更加美观好看,也由此可以看出浮动在布局中起到的作用。