DIV CSS中float用法探究

开发 前端
你对DIV CSS中float用法是否了解,这里和大家分享一下,float是浮动,翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。

本文和大家重点讨论一下DIV CSS中float用法,通过CSS定义float(浮动)让div样式层块,向左或向右(靠)浮动。

DIV CSS中float用法

◆float是什么意思?

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

◆float的作用

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

◆float语法:

float:none|left|right

◆参数值:
none: 对象不浮动
left: 对象浮在左边
right: 对象浮在右边

接下来我们来通过一个DIV+CSS实例讲解float使用技巧。#p#

DIV CSS实验一

CSS样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。

CSS案例演示最终效果图如下

1、首先我们设置一个最外层的宽度为300px,高度为200px的CSS命名为box的CSS选择器代码如下(知识点px是什么意思)
 

  1. .box{width:300px;height:200px;}  
  2.  

2、设置box内的文字内容部分CSS样式命名为yangshi,并设置背景为蓝色,宽度为120px,居右浮动
 

  1. .yangshi{width:120px;float:right;background:#0066FF;}  
  2.  

3、设置图片居左浮动DIV+CSS样式
 

  1. img{float:left;}  
  2.  

4、body内的div布局,代码如下 

  1. <divclassdivclass="box"> 
  2. <divclassdivclass="yangshi">我是www.divCSS5.com网站,测试内容div> 
  3. <imgsrcimgsrc="demo.gif"/> 
  4. div> 
  5.  

说明:这里img标签是链接外部图片,图片名为demo.gif

最终演示结果截图

#p#

DIV CSS实验二

接下来我们演示使用DIV+CSS让这里小图片居右(上个例子是居左),蓝色背景文字内容区居左(上个例子是居右)(扩展CSS居中)。这里我们只需要改变yangshi的float:right;为float:left和图片CSS样式img{float:left;}为img{float:right;}

CSS代码如下: 

  1. .box{width:300px;height:200px;}  
  2. .yangshi{width:120px;float:right;background:#0066FF;}  
  3. img{float:left;}  
  4.  

html中的CSS代码和内容不变

最终演示结果截图如下:

【编辑推荐】

  1. 不用float也能实现DIV模块居中布局
  2. IE6、IE7、Firefox中margin问题解决办法
  3. Float构建三栏DIV CSS网页布局
  4. CSS兼容:解决IE6、IE7和IE8的兼容问题妙招
  5. DIV CSS网页布局需要掌握的八大技巧


 

责任编辑:佚名 来源: divcss5.com
相关推荐

2010-09-15 14:00:06

position属性DIV

2010-09-09 15:08:40

CSSfloatclear

2010-09-01 11:21:18

CSSpositionfloat

2010-08-30 08:41:43

DIV显示DIV隐藏

2010-08-25 14:26:09

CSSdisplay

2010-08-30 15:26:13

floatCSS

2010-09-06 13:04:16

CSS浮动float

2010-09-02 15:32:51

CSSfloat

2010-08-24 09:05:20

CSS+DIV

2010-08-30 15:55:54

DIV+CSS

2010-08-24 15:45:48

DIVCSSfloat

2010-09-06 09:57:01

CSS类选择器CSS

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2010-09-10 10:10:36

CSS属性

2010-08-23 15:51:54

paddingmargin

2010-09-09 13:12:54

CSSfloatDIV

2010-08-24 11:25:06

DIVCSS

2010-08-27 10:04:33

borderclearCSS

2010-09-01 14:02:27

绝对定位浮动CSS

2010-08-26 12:47:15

CSSclass
点赞
收藏

51CTO技术栈公众号