sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > CSS浮动设置与清除

CSS浮动设置与清除

作者:xuhongji发布时间:2020-09-16分类:Html浏览:316评论:0


导读:float:设置浮动  浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用。  html:˂p˃以下是图片的浮...
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;    
}

  浏览器显示如下:

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


欢迎 发表评论:

Html排行
«   2020年11月   »
1
2345678
9101112131415
16171819202122
23242526272829
30
标签列表
网站分类
文章归档
最近发表
推荐文章