原文链接：http://developer.51cto.com/art/201009/224908.htm
你对clear属性在CSS中的使用是否了解，这里向大家描述一下，在DIV+CSS设计网页中设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，使用Clear属性正好可以解决这一问题，下面引用帮助的介绍。
clear在CSS中的妙用
在DIV+CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性正好可以解决这一问题，下面引用帮助的介绍：
CSS clear属性
图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。
注意：当这个属性随着"float"属性一起使用的话，那么结果可能会不尽如人意
Inherited:No
继承性：无
可用值
示例代码：
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<style type="text/css">
.LeftText{
margin:3px;
float:left;
height:180px;
width:170px;
border:1pxsolid#B1D1CE;
background-color:#F3F3F3;
}
.FootText{
height:180px;
}
.Clear
{
clear:both;
}
</style>
</head>
<body>
<div class="LeftText">区块1</div>
<div class="LeftText">区块2</div>
<div class="Clear">123</div>
<div class="FootText">区块3</div>
</body>
</html>
代码说明：
如果没有Clear这一层，“区块3”会紧接区块2并列在同一行。加了Clear这一层后，会把上面的浮动DIV的影响清除，使其不至影响下面DIV的布局
相关推荐
本文介绍css中的clear属性使用方法，大家参考使用吧
我对css几个主要属性的理解，inline,block,float,clear
清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例
CSS clear属性相信大家都有所耳闻吧，下面举例说明下clear属性到底给float（clear常常和float结合使用）带来哪些影响
请确认你安装了最新版的Flash Player，其实这不算是一个严格的Flash地图，我觉得如果你是一个比较大的公司，用这个Flash显示公司在全国各地的办事处地址比较合适，用TXT存储数据，因此所有数据都可在TXT中修改。...
本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code...
NULL 博文链接：https://ywzqzhangjiawei.iteye.com/blog/1490877
主要介绍了css的border和clear属性使用方法和示例,需要的朋友可以参考下
第四步，在Firefox浏览器中打开我们要优化的页面（本地的页面也可以），点击右上角的firebug(有个小蜜蜂图标)，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最...
3.7 CSS中的几何题 3.8 本章小结 第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码 4.1.2 实验1——设置第1个浮动的div 4.1.3 实验2——设置第2个浮动的div 4.1.4 实验3...
Unity 3D 摄像机 Clear Flags属性和Culling Mask属性用途详解
3.7 CSS中的几何题 3.8 本章小结 第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码 4.1.2 实验1——设置第1个浮动的div 4.1.3 实验2——设置第2个浮动的div 4.1.4 实验3——设置第3个浮动的div...
3.7 CSS中的几何题 3.8 本章小结 第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码 4.1.2 实验1——设置第1个浮动的div 4.1.3 实验2——设置第2个浮动的div 4.1.4 实验3——设置第3个浮动的...
使用clear属性清除浮动是司空见惯的事情,使用clear:left早已烂熟于胸；但是使用clear:right属性的时候未必奏效了,本文将针对这个问题详细探讨下，感兴趣的朋友可以了解下，希望对你有所帮助
CSS在图片中的应用 #face { width:580px; clear:both; height:66px; margin:0 auto; font-size:12px; } #face li { list-style:none; padding:0 0 0 25px; margin:0; width:57px; height:26px; line-...
本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...