您的位置:CSS主页 > CSS基础 >

DIV CSS float浮动知识用法篇

 

DIV CSS float浮动知识用法与float浮动教程篇

Css样式的float浮动属性,用于设置标签对象(如:div、spana标签em标签html标签)的浮动布局,浮动也就是我们所说标签对象局左(float:left)和居右(float:right)。

float目录
  1. float浮动语法
  2. float应用与用法
  3. css float浮动案例
  4. css浮动总结

一、float语法   -   TOP

Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动


float语法结构图

二、float应用与用法   -   TOP

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

简单使用语法
div{float:left}
div{float:right}

三、css float浮动案例   -   TOP

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

1、主要的html代码片段:
<div class="thinkcss">
<div class="thinkcss_left">布局靠左浮动</div>
<div class="thinkcss_right">布局靠右浮动</div>
</div>

2、css代码片段:
.thinkcss{ width:400px}
.thinkcss_left{ float:left; width:150px; border:1px solid #00F; height:50px}
.thinkcss_right{ float:right; width:150px; border:1px solid #00F; height:50px}

3、案例效果截图


float:left、float:right使用案例截图

四、css浮动总结   -   TOP

我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式,浮动只针对html标签设置靠左靠右浮动样式。浮动没有靠中(浮动居中)的样式,如果需要让标签对象居中我们在布局居中相关文字给大家详细讲解介绍。这里记住浮动靠右使用float:right,浮动靠左使用float:left样式即可。

标签(Tag): 浮动 float 居左 居右

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-11-02     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/c92.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息