有关clear:both|left|right|none;
声明：文章为网络资源整理，如有侵权24小时内删除。联系QQ：1522025433
一、CSS3中clear属性
首先clear不是一个标签，它是css中的一个属性。
其属性值有四个clear:both|left|right|none;
简单来说呢，clear属性的作用就是“清除”浮动。
如果某元素设置
clear:left;表示该元素左边不存在浮动元素相应的，
clear:right;表示该元素右边不存在浮动元素；
clear:both;表示该元素两边都不存浮动元素。
clear:none表示两边允许有浮动元素。
在视觉上要使某元素左边或右边不存在浮动元素,就只有它往下移一行，或浮动元素往下移一行。（这个元素肯定是不能将浮动元素清除的了,只是用这样的方式达到页面布局的效果而已）。
其中的浮动元素就是设置了float属性的元素。
clear:left|right|both都会用到
不知道你有没有碰到过这种情况：
四个div,想让它们显示成两行，我一般会这么做
方法一：
<div style="float:left;"></div><div style="float:left;"></div>
<div style="float:left;clear:left;"></div><div style="float:left;"></div>
方法二：
<div style="float:left;"></div><div style="float:left;clear:right;"></div>
<div style="float:left;"></div><div style="float:left;"></div>
（这些样式一般会写到css文件或文档头部中）
当然这只是一种情况，还有其它的，一时想不起来。
总之，它存在总有它的道理，只要你记住它的用处，总有一天你会用到它的。
但是如果我们真正运行完上面方法一和方法二的代码会发现：方法二（在第二个盒模型运用float:right;）并不会有效果；
下面用一个完整的示例来解释一下：
二、为什么clear:right;不起作用
建议:尽可能的手写代码，可以有效的提高学习效率和深度。使用clear属性清除浮动是司空见惯的事情，对于clear属性的定义可能也烂熟于胸了。例如，clear:left是清除左侧的浮动元素，实例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动（有关float:right;不起作用）</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;/*稍后添加代码位置，clear:right;*/
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
clear:left;/*稍后代码删除位置*/
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>
在浏览器中的效果为：
clear:left;有效
从以上代码可以看出，第三个div的clear:left属性的作用得到了体现，元素产生换行。
但是使用clear:right属性的时候未必奏效了。
实例代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动（有关float:right;不起作用）</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
clear:right;/*代码添加位置*/
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>
在浏览器中的效果为：
clear:left;有效
以上代码尽管第二个div有clear:right代码，但是它的右侧还是出现了浮动元素。
这主要代码是顺序执行的，当执行到第二个div要清除右浮动的时候，第三个div并没有被加载，所以它的清除效果也就无效了，于是第三个div依然会紧跟着第二个div。
三、附：使用clear属性清除浮动的CSS代码（IE6浏览器下出现一块多余高度的情况）
使用clear属性可以清除浮动，不过也有需要特别注意的地方，下面就简单介绍一下此清除浮动究竟如何写和IE6浏览器下出现一块多余高度的情况的解决方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
width:300px;
height:102px;
border:1px solid red;
}
.left{
width:100px;
height:100px;
border:1px solid blue;
float:left;
}
.right{
width:100px;
height:100px;
border:1px solid green;
float:right;
}
.clear{
clear:both;
height:0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">我左浮动</div>
<div class="right">我右浮动</div>
<div class="clear"></div>
</div>
</body>
</html>
以上代码中，最后一个子div用来清除浮动。在标准浏览器下，没有任何问题，但是如果在IE6浏览器下面就会发现，下面多出了一块空白，这是因为IE6浏览器无法采用正常手段定义一个height:0px的对象。
下面是解决方案代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
width:300px;
height:102px;
border:1px solid red;
}
.left{
width:100px;
height:100px;
border:1px solid blue;
float:left;
}
.right{
width:100px;
height:100px;
border:1px solid green;
float:right;
}
.clear{
clear:both;
height:0px;
font-size:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">我左浮动</div>
<div class="right">我右浮动</div>
<div class="clear"></div>
</div>
</body>
</html>
在第一段代码的基础上，在clear类中添加了font-size:0px和overflow:hidden即可解决IE6浏览器下出现一块多余高度的情况。
本文章含有的转载地址：
