首页前端开发JavaScript前端float怎么用?float属性详解

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

时间2024-01-29 00:07:02发布访客分类JavaScript浏览882
导读:收集整理的这篇文章主要介绍了前端float怎么用?float属性详解,觉得挺不错的,现在分享给大家,也给大家做个参考。在网页布局中,我们经常会遇到文字和图片相结合的效果,也有的图文混排,其实文字混排在网站上使用很多,也是比较广泛的,那么如何...
收集整理的这篇文章主要介绍了前端float怎么用?float属性详解,觉得挺不错的,现在分享给大家,也给大家做个参考。在网页布局中,我们经常会遇到文字和图片相结合的效果,也有的图文混排,其实文字混排在网站上使用很多,也是比较广泛的,那么如何实现图片混排,下面我们来讲解一下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属性详解的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: 经验分享:css浮动属性float详解下一篇:hr怎么设置虚线样式?多种hr样式...猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处: 前端float怎么用?float属性详解
本文地址: https://pptw.com/jishu/590339.html
HTML中的空格符号是什么 hr怎么设置虚线样式?多种hr样式分享!

游客 回复需填写必要信息