分享更有价值
被信任是一种快乐

css浮动float怎么用

文章页正文上

这篇文章给大家分享的是有关css浮动float怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
  一、float语法结构与小示例
  1、float语法:
  float : none | left |right
  2、float参数值介绍:
  float:none —— 对象不浮动
  float:left —— 对象浮在左边
  float:right —— 对象浮在右边
  3、float值使用说明:
  float属性的值指出了对象是否及如何浮动。
  当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
  4、css float结构分析图
  float属性分析图
  5、float设置小示例:
  .exp-a{ float: left }
  .exp-b{ float: right }
  float设置对象靠左(float:left)、靠右(float:right),在div css布局中相当重要
  二、float小实例
  这里CSS5使用float设置两个盒子一个靠左、一个靠右显示,为了观察到对象浮动靠左靠右效果,对其分别设置css 宽度、CSS 高度、CSS 边框。
  1、完整HTML CSS代码
  float属性 小实例 CSS5
  .exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}
  .exp-a{ float:left; width:200px; height:100px; border:1px solid #F00}
  .exp-b{ float:right; width:260px; height:120px; border:1px solid #00F}
  float实例CSS代码解释:
  .exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}
  为了观察到.exp对象里子级float靠左靠右浮动小DIV对象效果,设置了黑色边框、宽度500px;padding避免内部子级贴近父级DIV,因为.exp内子级设置float,所以设置overflow:hidden让.exp撑开。感谢各位的阅读!关于“css浮动float怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉免费云主机、域名得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: CSS颜色怎么编写

本篇内容主要讲解“CSS颜色怎么编写”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS颜色怎么编写”吧! CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册