CSS操作DIV的float用法

css样式的float浮动属性,用于设置标签对象(如:

标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

float是什么意思?

float是浮动,翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。

float的作用

通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。

立即学习“前端免费学习笔记(深入)”;

float浮动教程目录

float语法

float应用与用法

float浮动案例

css浮动其他应用

css浮动总结

float语法

Float常跟属性值left、right、none

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

float语法: 

float : none | left |right

参数值: 

none :  对象不浮动

left :  对象浮在左边

right :  对象浮在右边

接下来我们来通过一个div+css实例讲解float使用技巧。

float应用与用法

Float浮动用于设置对象靠左与靠右浮动样式,可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。

简单使用语法

div{float:left} /* css注释:设置div对象浮动靠左(left) */ 

div{float:right} /* css注释:设置div对象浮动靠右(right) */ 

css float浮动案例

我们设置一个盒子里,一个靠右、一个靠左浮动2个盒子,为了直观看到css浮动布局效果,我们对两个盒子设置一定宽度、高度和边框。

1、主要的html代码片段:

 

   

布局靠左浮动

 

   

布局靠右浮动

 

   

 

 

2、css代码片段:

.div { width:400px;padding:10px;border:1px solid #F00} 

.div _left{ float:left;width:150px;border:1px solid #00F;height:50px} 

.div _right{ float:right;width:150px;border:1px solid #00F;height:50px} 

.clear{ clear:both} 

CSS操作DIV的float用法就这么多,需要的朋友可以保存一下,也请大家持续关注本站的其他更新。

相关阅读:

CSS的min-width和max-width怎么设置

CSS的margin有什么作用

CSS3怎么做出圆角

以上就是CSS操作DIV的float用法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545228.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:42:23
下一篇 2025年12月21日 16:42:37

相关推荐

  • 怎样用CSS操作div的z-index

    平时我们需要用到z-index这个属性的时候很容易弄混,那么今天我们就给大家缕一缕z-index从基本属性到设置对象的层叠顺序、重叠顺序。 z-index语法与结构    z-index 跟具体数字 如:p{z-index:100} 注意:z-index的数值不跟单位。 立即学习“前端免费学习笔记(…

    好文分享 2025年12月21日
    000
  • css鼠标悬停动画

    css实现鼠标悬停动画,免费提供源码,可以研究参考或者拿去使用~~ 代码: PHP中文网–CSS3鼠标悬停动画body {margin: 200px;text-align: center;font: 1em “微软雅黑”;}/*去掉li的点或者顺序*/ul,ol,li {list-style-ty…

    2025年12月21日
    000
  • css怎么设置透明度

    工作中我们经常会需要用到css代码来设置div的透明度,今天给大家来介绍一下,怎样用css样式表来设置div的透明半透明。希望能帮到大家。 首先说一下设置DIV半透明的CSS代码: div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;…

    好文分享 2025年12月21日
    000
  • 怎样让css图片居中显示

    在项目中我们也经常会遇到这种情况,要让图片居中显示,方法有很多,不过最推荐的就是用css来操作div,那么下面就给大家举介绍俩种方法,用css操作让图片居中显示。 首先让图片中DIV对象盒子内水平居中,和让文字字体在DIV盒子内水平居中CSS相同。 CSS让对象内容居中样式单词为: text-ali…

    好文分享 2025年12月21日
    000
  • 怎样用CSS加粗字体

    今天给大家介绍一下怎样用css加粗字体,我们发文章的时候,标题和正文的大小以及字体肯定是不同的,那么我们就给大家详细讲解一下,怎样用css来加粗文章的字体,怎么控制文章字体的粗细 。 CSS 加粗这里指的是通过DIV CSS控制对象的加粗。 使用CSS属性单词 font-weight 对象值:从10…

    好文分享 2025年12月21日
    000
  • 怎么用CSS修改鼠标样式

    很多时候我们需要吧鼠标光标和页面的元素结合互动,这样能增加用户体验度,那么我们需要怎么用css设置鼠标样式呢?今天就给大家带来这份教程,怎样用css来修改鼠标样式。 我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式c…

    2025年12月21日
    000
  • css,js实现听话的骰子源码

    又是一波福利!css和js实现的一个听话的骰子,拿去研究吧,不要钱! 代码: PHP中文网–骰子源码html,body,ul {margin: 0;padding: 0;}body {perspective: 2000px;overflow: hidden;text-align: center;}…

    2025年12月21日
    000
  • css,js骰子抽奖源码

    本源码是根据之前发布的听话的骰子基础上再做升级的,免费提供源码,拿去学习吧!常来我们的创想鸟即可哦~ 代码: PHP中文网–骰子抽奖html,body,ul {margin: 0;padding: 0;}body {perspective: 1200px;overflow: hidden;}ul …

    2025年12月21日
    000
  • css波纹动画

    css波纹动画,动画效果,免费提供源码~~不要钱拿去研究吧~~ 代码: PHP中文网body{background: #000;}.box{width: 100%;height: 600px;background: #000;}.vr {display: block;width: 71px;heig…

    2025年12月21日
    000
  • css 、jquery实现3d立体旋转

    一个用css和jquery实现的3d立体旋转,免费提供源码~~可以供您研究哦~~ 代码: PHP中文网*{margin: 0;padding: 0;}ul,li{list-style: none;}#box {width: 800px;height: 360px;position: relative…

    2025年12月21日
    000
  • 用css实现圆形进度条

    利用纯css实现进度条小应用,可以放在其他的页面使用也可以自己研究~免费提供源码~~ 代码: PHP中文网*{margin: 0;padding: 0;}.progress-ring{width: 160px; height: 160px; border:20px solid green; bord…

    2025年12月21日
    000
  • html和CSS以及JavaScript的小例题(图)

    声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 这个例题主要是做一个表格,一个存储*的表格,能够完成以下功能:1.添加学生2.删除学生3.修改学生4.分页查询学生html代码: CSS代码: JavaScri…

    2025年12月21日 好文分享
    000
  • HTML调用CSS管理、美化div的方法

    css布局,关键在于html文件和css文件相对应。在html中,对各p的包含关系作层次分明的设计,然后在css文件中对样式、字体等式进行设计。 HTML文件 p_header p_views p_views_post p_views_auther p_views p_floot CSS文件 .p_…

    2025年12月21日
    000
  • 四种css垂直居中方法

    垂直居中 .parent{width: 400px;height: 400px;border:1px solid grey;display: } .children{width: 200px;height: 200px;background-color: #ccc;} /*table-cell*/ …

    好文分享 2025年12月21日
    000
  • HTML+CSS3实现心跳效果代码分享

    本文通过代码给大家介绍了html+css3模拟心的跳动的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: 模拟心的跳动 * { margin: 0; padding: 0;}body { background-color: #D4CECE…

    好文分享 2025年12月21日
    000
  • 实例展示DIV+CSS实现电台列表

    这篇文章主要介绍了p+css实现电台列表设计的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术,可有效…

    2025年12月21日 好文分享
    000
  • html5+CSS3+JS七夕告白功能实现详解

    因为今天8月28日就是中国的情人节—七夕,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的七夕情人节特效,具体实例代码,大家参考下本文  因为今天8月28日就是中国的情人节—七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心;…

    2025年12月21日
    000
  • 如何利用html和css来实现注册表单的简单实例

    效果总览: 具体代码实现 提交用户信息body, p, td, input {font-size:12px; margin:0px; }select {height:20px; width:300px; }.title {font-size: 16px; padding: 10px; width:8…

    2025年12月21日
    000
  • 关于html和css以及javascript等其他的注释方式分享

    一、html的注释方法 内容 包含在“”之间的内容将会被浏览器忽略,且不会显示在用户浏览的最终界面中。 注释的部分虽然浏览器在执行时会忽略,但在浏览器中查看源代码时仍然可以看到 二、CSS的注释方法 立即学习“Java免费学习笔记(深入)”; /* css注释*/ 在单独的css样式表文件中也采用此…

    好文分享 2025年12月21日
    000
  • html使用四种方式引用css样式表的实例详解

    方法一: css1.html 内联样式(方法一)百度一下 方法二: css2.html style标签中调用(方法二)a{color:#FF0000;background:#FFFF00;}百度二下  方法三: css3.html link标签中调用(方法三)百度三下 和css3.html同目录下的…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信