CSS浮动设置与清除-html教程-PHP中文网

CSS浮动设置与清除

php中文网

发布： 2016-09-21 13:56:09

原创

1186人浏览过

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属性

稿定AI设计

AI自动去水印、背景消除、批量抠人像工具

查看详情

　　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;    
}

登录后复制

　　浏览器显示如下：