欢迎进入悦阁网络,做靠谱的公司,做靠谱的网站! 【登录】 【注册】 【新版官方网站】 全国7*24热线电话: 0757-89375359 18824129793、 020-89375359
悦阁观点
悦阁软著证书
div css教程
html教程-H5
百度竞价教程
SEO推广教程
网站售后文档
建站沙漠风云
网站建设知识
微信营销知识
微信营销技巧
投诉建议
投诉中心受理方式:
电话:13928792327
邮箱:hefc@yuegekeji.cn
CSS教程-css float【css浮动】left靠左 right靠右属性图文教程

css float【css浮动】left靠左 right靠右属性图文教程

div css float【css 浮动】属性图文实例教程篇

一般HTML网页布局时候,都会用到若干次float浮动属性,这里yuegekeji为大家介绍浮动float属性基本语法到使用示范实例。

float常常用于对对象设置靠左、靠右排版布局,遇到对象盒子靠左或靠右时就需要使用css float来布局,当然此属性是设置框架靠左靠右,而另外一个css内容靠左、css内容靠右、css内容居中属性text-align,切勿搞混淆。

一、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、float设置小示例:

.exp-a{ float: left } 
.exp-b{ float: right } 

float设置对象靠左(float:left)、靠右(float:right),在div css布局中相当重要

二、float小实例

这里yuegekeji使用float设置两个盒子一个靠左、一个靠右显示,为了观察到对象浮动靠左靠右效果,对其分别设置css 宽度、CSS 高度、CSS 边框。

1、完整HTML CSS代码

 
 
 
 
这个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撑开。

三、float使用总结

float在布局html网页时候,基本都会用到,常用float:left(靠左)和float:right(靠右),以上案例是左右布局的靠左靠右应用,如果遇到多列布局,同样也是使用float来实现,而float没有靠中(布局居中)值,比如三列div布局,看似中间是居中布局的,实质上也是通过float:left或float:right实现并列显示。


作者:@悦阁网络科技 

悦阁网络科技有限公司专业为中小企业提供精致的佛山网站建设佛山网站设计佛山网站制作及相关网络营销等服务,是广佛地区最好的网络科技公司之一,在广佛做网站开发就找悦阁网络科技!

您对建网站有需求?请回到首页“悦阁网络”官网  查找您想建哪种类型的网站,然后联系我们客服QQ,我们将竭诚为您服务!



Copyright © 2011 All rights reserved 佛山市悦阁网络科技有限公司版权所有 粤ICP备14100185号 技术支持:悦阁科技 佛山网站建设11111 | 在线助手高新企业证书编号:GR201744001793

× 悦阁网络科技有限公司-在线助手

你好!
悦阁网络科技有限公司在线助手,请输入你要想知道的问题关键字