原文地址:http://www.codefans.net/articles/653.shtml

因CSS很多布局是需要浮动的,当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,为了使float后面的元素不被float浮动层的影响,我们就需要用clear:both;来清除。比如下面的例子:

1 <p style="float:left;width:200px;">第1列,</p>
2 <p style="float:left;width:400px;">第2列,</p>
3 <p style="clear:both;">第3列。</p>

如果没有清除浮动,那么第3列文字就会和第1、2列文字连在一起 ,所以需要在第3个列上加入清除浮动的代码。

一般情况下,我们会为清除浮动专门定义一个CSS类,用时候直接引用,这样更方便,比如:

01 <style>
02 .clear {clear: both;}
03 </style>
04 <!--以下为调用方法-->
05 <div class="clear"></div>
06  
07 <!--比如上面的例子可以写成:-->
08 <p style="float:left;width:200px;">第1列,</p>
09 <p style="float:left;width:400px;">第2列,</p>
10 <div class="clear"></div>
11 <p>第3列。</p>

因为IE和火狐存在兼容性问题,所以有时候这样定义清除浮动会在不同浏览下效果会不同,IE也说的过去,在火狐下或许就不灵了,下面给出一个经过调试的CSS清除浮动代码,供参考:

1 .clear {
2 clear: both;
3 height:1px;
4 margin-top:-1px;
5 overflow:hidden;
6 }

清除浮动一般是在外层Div结束前,如果放在结束后,则无效。

clear both的更多相关文章

  1. Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)

    作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...

  2. List集合的removeAll(Collection<E> col) 和clear方法的区别

    //removeAll()方法private static void testList(){ List<String> list = new ArrayList<String> ...

  3. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

  4. python dict clear只能删除一层,不能够递归删除。

    void PyDict_Clear(PyObject *op) { dictobject *mp; dictentry *ep, *table; int table_is_malloced; Py_s ...

  5. clear属性

    clear:规定元素的哪一侧不允许其他浮动元素. clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上 ...

  6. css 清除浮动 clear

    .clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...

  7. div+css中clear用法

    一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该 ...

  8. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

  9. CSS-float详解,深入理解clear:both[转+部分原创]

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素 ...

  10. java.nio.ByteBuffer中flip,rewind,clear方法的区别

    对缓冲区的读写操作首先要知道缓冲区的下限.上限和当前位置.下面这些变量的值对Buffer类中的某些操作有着至关重要的作用: limit:所有对Buffer读写操作都会以limit变量的值作为上限. p ...

随机推荐

  1. 【leetcode】Two Sum (easy)

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  2. 【linux】linux下运行java程序

    参考了http://www.cnblogs.com/howard-queen/archive/2012/01/30/2331795.html 第一步:用vim先写一个java程序  first.jav ...

  3. LeetCode 283 Move Zeros

    Problem: Given an array nums, write a function to move all 0's to the end of it while maintaining th ...

  4. windows server 2008 配置安装AD 域控制器

    工作需要,搞起AD域来,具体配置如下: 配置环境 Windows版本:Windows Server 2008 R2 Enterprise Service Pack 1 系统类型: 64 位操作系统 配 ...

  5. Keepalived虚拟ip

    linux下如何设置vip(虚拟ip) 在做HA的时候需要为服务器设计虚拟IP,也就是一个主机对应多个IP地址?刚听起来好神奇,原来这样也是可能的看了下面的这个链接 自己配了一下http://hi.b ...

  6. 129. Sum Root to Leaf Numbers

    题目: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a nu ...

  7. Java ANT build.xml

    详情请参考:http://www.cnblogs.com/xionghui/archive/2012/03/13/2393679.html

  8. eclipse上安装abator插件

    下面是我看了网上的有一点需要强调:网址 http://ibatis.apache.org/tools/abator然后全选,然后是==>重启就好了 eclipse上安装abator插件参考:ht ...

  9. PHP常用函数大全。

    php usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID. time_sleep_ ...

  10. 七牛:关于图片 EXIF 信息中旋转参数 Orientation 的理解

    EXIF(Exchangeable Image File)是 “可交换图像文件” 的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数.缩略图及其他属性信息,简单来说,Ex ...