html图⽚靠左浮动,float【css浮动】left靠左right靠右属性图⽂
教程
div css float【css 浮动】属性图⽂实例教程篇
⼀般HTML⽹页布局时候，都会⽤到若⼲次float浮动属性，这⾥CSS5为⼤家介绍浮动float属性基本语法到使⽤⽰范实例。
float常常⽤于对对象设置靠左、靠右排版布局，遇到对象盒⼦靠左或靠右时就需要使⽤css float来布局，当然此属性是设置框架靠左靠右，⽽另外⼀个css内容靠左、css内容靠右、css内容居中属性text-align，切勿搞混淆。
⼀、float语法结构与⼩⽰例
1、float语法：
float : none | left |right
html里的float是什么意思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}
这个DIV对象靠左
这个DIV对象靠右
float实例CSS代码解释：
.exp{ width:500px; border:1px solid #333; padding:10px; overflow:hidden}
为了观察到.exp对象⾥⼦级float靠左靠右浮动⼩DIV对象效果，设置了⿊⾊边框、宽度500px；padding避免内部⼦级贴近⽗级DIV，因为.exp内⼦级设置float，所以设置overflow:hidden让.exp撑开。
2、float浮动效果截图
div css float浮动实例效果截图
3、float实例在线演⽰与打包下载
css float实例在线演⽰：
div css浮动实例打包下载：
三、float使⽤总结
float在布局html⽹页时候，基本都会⽤到，常⽤float:left(靠左)和float:right(靠右)，以上案例是左右布局的靠左靠右应⽤，如果遇到多列布局，同样也是使⽤float来实现，⽽float没有靠中(布局居中)值，⽐如三列div布局，看似中间是居中布局的，实质上也是通过float:left或float:right实现并列显⽰。
作者：div css

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。