欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

前端float怎么用?float属性详解

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

在网页布局中,我们经常会遇到文字和图片相结合的效果,也有的图文混排,其实文字混排在网站上使用很多,也是比较广泛的,那么如何实现图片混排,下面我们来讲解一下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>

显示效果如下:

微信截图_20181103095732.png

但是对于仔细的读者就会发现,文本的顶部和图片怎么不会水平居中呢,其实是这样的,在浏览器中,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教程,请关注杨雨个人博客。 本文地址:http://itbyc.com/web/html5/19938.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1