本文摘自百度文库

　　还是提到了一个关于网页制作很古老的问题，浮动的清除。

　　虽然看过一些资料介绍说能不用浮动就尽量不要用，但对定位不是很熟的我来说，浮动就不能不用了；既然惹上这个麻烦，就得想个办法进行解决。

　　在论坛里搜索，可以看到有很多这方面的介绍，看过一些总结有一下几种方法：

　　1、额外增加一个容器，添加清除（clear）的标签以撑大其父容器；

　　2、使用:after的伪类标签；

　　3、在父容器设置overflow属性（其值不可为visible）；

　　4、将父容器也设置浮动的属性，利用浮动元素的一个特征：浮动元素会闭合浮动元素；

　　5、使用<br clear="all" />；

　　...

　　以上大概就是几种常见的方法，我不去深究各自方法的优缺点和兼容性（有兴趣的朋友可以都试试），我只拿出其中两种方法进行比较：clear和:after，看看到底应该怎么用。

　　先看下面的例子：

　　1、一行两列，子容器进行浮动布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=utf-8" />

<title>关于clearfix和clear的讨论</title>

<style type="text/css">

/*<![CDATA[*/

#container {width:500px; background:#000; color:#fff;}

#content {width:300px; height:100px; background:#FFFF00; color:#000; float:left;}

#content2 {width:100px; height:100px; background:#f22; color:#000; float:left;}

/*]]>*/

</style>

</head>

<body>

<div id="container">container

<div id="content">content</div>

 <div id="content2">contenet2</div>

</div>

</body>

</html>

没有进行浮动清除浏览显示如下结果：

IE：

FF：

那如果我们进行清除改怎么写呢？

这里如果用clear就得加一个空白的div，如css：

.clear {clear:both;}

xhtml：

<div id="container">container

 <div id="content">content</div>

<div id="content2">contenet2</div>

<div class="clear"></div>

</div>

而使用:after，如css：

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

* html>body .clearfix { display: inline-block; width: 100%; }

* html .clearfix { height: 1%; /* End hide from IE-mac */ }

/* ie7 hack*/

*+html .clearfix { min-height: 1%; }

xhtml：

<div id="container" class="clearfix ">container

<div id="content">content</div>

<div id="content2">contenet2</div>

</div>

这里我们可以看出使用:after比较方便；

2、两行两列，第一行两子容器浮动，第二行单独一个子容器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=utf-8" />

<title>关于clearfix和clear的讨论</title>

<style type="text/css">

/*<![CDATA[*/

#container {width:500px; background:#000; color:#fff;}

#content {width:300px; height:120px; background:#FFFF00; color:#000; float:left;}

 #content2 {width:100px; height:100px; background:#f22; color:#000; float:left;}

#content3 {width:60px; background:#ccc; color:#000;}

.clear {clear:both;}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

* html>body .clearfix { display: inline-block; width: 100%; }

* html .clearfix { height: 1%; /* End hide from IE-mac */ }

/* ie7 hack*/*+html .clearfix { min-height: 1%; }

/*]]>*/

</style>

</head>

<body>

<div id="container" class="clearfix">container

<div id="content">content</div>

<div id="content2">contenet2</div>

 <div id="content3">contenet3</div>

</div>

</body>

</html>

如此写法浏览显示结果如下：

IE:

FF：

FF下显示正常，而IE下则跟随浮动靠右侧了，换种写法：

<div id="container">container

<div id="content">content</div>

<div id="content2">contenet2</div>

<div id="content3" class="clear">contenet3</div>

</div>

浏览全部显示正常。值得注意的是，这里使用class="clear"需要遵循一个原则：应该在设置浮动标签容器的同级进行清除。这里正好巧妙的应用了这一点，避免产生一个空白的div。

3、设置浮动的容器里再添加浮动的子容器，可以自动清除浮动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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=utf-8" />

<title>关于clearfix和clear的讨论</title>

<style type="text/css">

/*<![CDATA[*/

#container {width:500px; background:#000; color:#fff;}

#content {width:300px; height:120px; background:#FFFF00; color:#000; float:left;}

#left {width:120px; height:100px; background:#ff0000; float:left;}

#right {width:120px; background:#0000ff; float:right;}

#content2 {width:100px; height:100px; background:#f22; color:#000; float:left;}

#content3 {width:60px; background:#ccc; color:#000;}

.clear {clear:both;}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

* html>body .clearfix { display: inline-block; width: 100%; }

* html .clearfix { height: 1%; /* End hide from IE-mac */ }

/* ie7 hack*/*+html .clearfix { min-height: 1%; }

/*]]>*/

</style>

</head>

<body>

<div id="container" class="clearfix">container

 <div id="content">content

<div id="left">left</div>

<div id="right">right</div>

</div>

<div id="content2">contenet2</div>

<div id="content3" class="clear">contenet3</div>

</div>

</body>

</html>

显示如图:

在经典论坛朋友的帮助下，对.clearfix又提出了一种写法：

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility:hidden; }

.clearfix{zoom:1;}

个人觉得这样更简单，而原理是相同的，就是对haslayout进行触发。

总结一点就是：方法不是唯一的，灵活应用才是必须的

关于clearfix和clear的讨论的更多相关文章

  1. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  2. 【css】清除浮动（clearfix 和 clear）的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  3. 关于clearfix和clear的研究

    今天领导跟我说到这个问题,我上网找了些资料,已转载一篇文章到本博客(后一篇),摘自百度文库. ps:还有一种写法就是: CSS代码: .clearfix:after { content: " ...

  4. clearfix清除浮动

    首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...

  5. clearfix清除浮动进化史

    我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...

  6. [笔记]使用clearfix清除浮动

    转载自奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; ...

  7. 转载：Clear Float

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...

  8. Clearing Floats清除浮动--clearfix的不同方法的使用概述

    清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我 ...

  9. clear-fix清除浮动的两种写法

    1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: ...

随机推荐

  1. C++ primer 第四版 练习3.13，3.14

    读一组整数到 vector 对象,计算并输出每对相邻元素的 和.如果读入元素个数为奇数,则提示用户后一个元素 没有求和,并输出其值. vector<int> ivec; int ival; ...

  2. oracle索引原理

    B-TREE索引(二叉树索引,默认情况下,我们建的索引都是此种类型) 一个B树索引只有一个根节点,它实际就是位于树的最顶端的分支节点.可以用下图一来描述B树索引的结构.其中,B表示分支节点,而L表示叶 ...

  3. Android开发入门要点记录：四大组件

    cocos2dx跨平台开发中需要了解android开发,昨天快速的浏览了一本Android开发入门教程,因为之前也似懂非懂的写过Activity,Intent,XML文件,还有里面许多控件甚至编程思想 ...

  4. HOG+SVM+INRIAPerson数据集代码

    #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgu ...

  5. removeLineEndSpace

    /****************************************************************************** * removeLineEndSpace ...

  6. long long 与 int

  7. synchronized (lock) 买票demo 线程安全

    加锁防止多个线程执行同一段代码! /** http://blog.51cto.com/wyait/1916898 * @author * @since 11/10/2018 * 某电影院目前正在上映贺 ...

  8. 关于Hibernate性能优化之 FetchType=Lazy时查询数据

    当表A和表B一对多的关系 对于A和B的实体类,设置FetchType=EAGER时,取A表数据,对应B表的数据都会跟着一起加载,优点不用进行二次查询.缺点是严重影响数据查询的访问时间. 解决办法Fet ...

  9. zstack（一）运行及开发环境搭建及说明(转载）

    本篇介绍zstack的部署环境,以及二次开发环境 运行环境 讲真,ZStack的安装做的还是不错的,提供多种安装模式,如离线安装.在线安装.一键安装.分布式安装等.安装的过程其实都很简单,当然这也是z ...

  10. es6 中，大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部，确保采用严格模式

    严格模式(use strict) 有助于防止问题用法,并且它也有助于安全使用 JavaScript. 在 ES5 中, 严格模式是可选项,但是在 ES6 中,许多特性要求必须使用严格模式. 因此大多数 ...