有关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浏览器下出现一块多余高度的情况。

本文章含有的转载地址:

  1. http://www.softwhy.com/forum.php?mod=viewthread&tid=4664

  2. http://www.softwhy.com/forum.php?mod=viewthread&tid=4667

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,350评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 954评论 0 1
  • 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能...
    卡卡西哥哥阅读 384评论 0 1
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 866评论 0 5
  • 拿着正版书,情不自禁会用脸蹭一蹭。
    徐一朵儿阅读 52评论 0 0