前端float怎么用?float属性详解
程序员文章站
2022-04-10 12:08:58
...
在网页布局中,我们经常会遇到文字和图片相结合的效果,也有的图文混排,其实文字混排在网站上使用很多,也是比较广泛的,那么如何实现图片混排,下面我们来讲解一下float属性?以及float怎么用?
一:float属性
在前端中,很多人会使用float属性去进行图文混排,但是对于新人都不知道float属性是什么用,其实float属性就两个属性,一个是左一个是右,left是表示该元素向左浮动,right表示该元素是向右浮动。在一般情况下,元素不会自己浮动的。【推荐学习:HTML5在线手册
】
例如:
<title>CSS浮动float属性</title> <style type="text/css"> img{float:left;} p{font-size:16px;text-indent:28px;} </style>
显示效果如下:
但是对于仔细的读者就会发现,文本的顶部和图片怎么不会水平居中呢,其实是这样的,在浏览器中,p标签具有默认的效果,就像我们看到strong就是看到了加粗一样,如果想要图片和文本保持一致的话,就要去除浏览器中的样式,
二:如何利用float属性设置图片和文字的间距
当文字围绕在图片周围,和文字也有一定的距离,只要我们在图片属性中加一下属性就可以了,代码如下:
<style type="text/css"> img{margin-right:20px;margin-bottom:20px;float:left;} </style>
在css中,float属性是很重要的,在利用float的时候,我们经常会对div使用float效果来布局,不仅对整个效果规划,同时也是一些基本的元素进行排列,
以上就是对前端float怎么用?float属性详解的全部介绍,如果你想了解更多有关Html5教程,请关注。
以上就是前端float怎么用?float属性详解的详细内容,更多请关注其它相关文章!
推荐阅读
-
html form标签name属性怎么用?form标签的name属性详解
-
CSS浮动属性Float详解?史上最全Float详解
-
animation属性怎么用?animation属性详解
-
调用动画animation-name属性怎么用?animation-name属性详解
-
详解CSS中display/float/position属性值的相互影响
-
css的float,position属性详解
-
经验分享:css浮动属性float详解
-
html form标签name属性怎么用?form标签的name属性详解
-
怎么将图片水平排列,并且图片间有间距,用float浮动之后就无法设置间距了。_html/css_WEB-ITnose
-
详解CSS float属性_html/css_WEB-ITnose