一：float属性

 

　　在前端中，很多人会使用float属性去进行图文混排，但是对于新人都不知道float属性是什么用，其实float属性就两个属性，一个是左一个是右，left是表示该元素向左浮动，right表示该元素是向右浮动。在一般情况下，元素不会自己浮动的。【推荐学习：HTML5在线手册

 

　　】

 

　　例如:

 

　　<title>CSS浮动float属性</title>

 

　　<styletype="text/css">

 

　　img{float:left;}

 

　　p{font-size:16px;text-indent:28px;}

 

　　</style>

 

　　显示效果如下：

 

　　微信截图_20181103095732.png

 

　　但是对于仔细的读者就会发现，文本的顶部和图片怎么不会水平居中呢，其实是这样的，在浏览器中，p标签具有默认的效果，就像我们看到strong就是看到了加粗一样，如果想要图片和文本保持一致的话，就要去除浏览器中的样式，

 

　　二：如何利用float属性设置图片和文字的间距

 

　　当文字围绕在图片周围，和文字也有一定的距离，只要我们在图片属性中加一下属性就可以了，代码如下：

 

　　<styletype="text/css">

 

　　img{margin-right:20px;margin-bottom:20px;float:left;}

 

　　</style>

 

　　在css中，float属性是很重要的，在利用float的时候，我们经常会对div使用float效果来布局，不仅对整个效果规划，同时也是一些基本的元素进行排列，





本文转载自中文网