CSS中Float和Clear属性用法

开发 前端
实现多栏排版的最好方法是使用CSS中float属性,float也是一个将使你受益匪浅的属性,这里向大家描述一下CSS 中float和clear属性的用法,相信本文介绍对你的学习一定会有所帮助。

本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。

CSS中Float和Clear属性用法

实现多栏排版的***方法是使用float属性,float也是一个将使你受益匪浅的属性。一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。

float和clear属性

以下是使用float和clear属性的一些重要准则:

◆一个float对象,将从其置身的block级非float内容流中跳出,换句话说,如果你要将一个box向左边float,它后面的block级非float对象会显示到下方,inline级内容会在旁边包围

◆要让一段内容从一侧包围一个float对象,这段内容必须要么是inline级的,要么也设置为相同方向的float

◆一个float对象,如果没有设置宽度,则会自动缩成其包含的内容的宽度,因此***为float对象明确设置宽度

◆一个设置了clear属性的对象,将不会包围其前面的float对象

◆一个既设置了clear又设置了float属性的对象,只有clear:left属性生效,clear:right不起作用
 

【编辑推荐】

  1. CSS float方法实现DIV CSS网页布局三栏页
  2. DIV CSS网页布局时合理架构CSS
  3. DIV CSS建站对浏览器兼容性和注意事项
  4. CSS2.0中page-break-after属性用法
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

 

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

2010-09-01 11:21:18

CSSpositionfloat

2010-08-27 10:04:33

borderclearCSS

2010-09-10 09:42:37

borderclearCSS

2010-08-26 09:58:01

CSS clear

2010-08-30 15:26:13

floatCSS

2010-09-06 13:04:16

CSS浮动float

2010-09-02 15:32:51

CSSfloat

2013-03-28 11:02:26

CSS浮动

2010-08-16 10:18:53

DivCSS

2010-09-07 14:40:10

title属性Alt属性CSS

2010-09-09 16:54:05

CSSclear

2010-09-08 15:16:46

clearCSS

2010-08-30 10:58:19

DIV CSSfloat

2010-09-02 11:18:46

CSSfloatposition

2010-08-24 15:11:24

PositionCSS

2010-08-25 08:57:33

marginpadding

2010-09-30 14:55:23

Javascriptfloat

2010-08-25 08:47:16

CSScellspacingcellpadding

2010-08-30 16:02:06

CSSclear

2010-09-14 13:05:10

VisibilityDisplayCSS DIV
点赞
收藏

51CTO技术栈公众号