CSS 基础语法--clear在CSS中的妙用

来源：百度文库 编辑：神马文学网 时间：2024/04/27 11:35:59
在DIV + CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个 DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性正好可以解决这一 问题，下面引用帮助的介绍：

CSS clear属性

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.
图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floating element)。使用clear属性可以让元素边上不出现其它浮动元素。

Note: This property does not always work as expected if it is used along with the "float" property.
注意：当这个属性随着"float"属性一起使用的话，那么结果可能会不尽如人意

Inherited: No
继承性：无

可用值

值 描述 left No floating elements allowed on the left side
不允许元素左边有浮动的元素 right No floating elements allowed on the right side
不允许元素的右边有浮动的元素 both No floating elements allowed on either the left or the right side
元素的两边都不允许有浮动的元素 none Allows floating elements on both sides
允许元素两边都有浮动的元素

举例



区块1

区块2


区块3



代码说明：

如果没有Clear这一层，“区块3”会紧接区块2并列在同一行。
加了Clear这一层后，会把上面的浮动DIV的影响清除，使其不至影响下面DIV的布局

CSS 基础语法--clear在CSS中的妙用 CSS基础篇:什么是CSS CSS语法手册 CSS语法手册 css 常用CSS缩写语法总结 常用CSS缩写语法总结 CSS中的!important属性 CSS基础：选择器与继承 常用CSS缩写语法总结 w3cn.org CSS高级篇(一):滤镜属性语法 css中的margin属性详解 css中的block / inline 属性 css的一些基础的东西 css的一些基础的东西 CSS基础：CSS2盒模型 - Martin‘s Blog~~愿望，在今生实现 CSS使用篇(一):将CSS放在何处 什么是css？css介绍 常用CSS缩写语法总结及缩写的原因 常用CSS缩写语法收集 - cnBruce's Blog | 布鲁斯狼 CSS 设计中的黄金分割率应用 css中的z-index属性使用简介 css中的绝对定位和相对定位 请教CSS中的position:relative;的作用。