CSS浮动设置与清除

float:设置浮动

　　浮动会使元素脱离普通文档流，使元素向左或向右移动，其周围的元素也会重新排布，在布局中非常有用。 

　　html：

<p>以下是图片的浮动设置：</p>
<img src="image/follow-1.png">
<p>图片后文字：注意&lt;p&gt;是块级元素，元素前后有换行符。</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;    
}

　　浏览器显示如下：

 

　　这样显得更加美观好看，也由此可以看出浮动在布局中起到的作用。

转载于:https://www.cnblogs.com/it-body/p/5891723.html