浮动，CSSfloat属性。学过的人应该知道这个属性，平时用的应该也是很多的。特别是在N栏布局中。

但是我们会经常遇到这样一种情况，前面的元素浮动之后会影响后面的元素，后面的元素需要用清除浮动来消灭前面元素的影响。

以前经常就是用<div style="clear:both"></div>或者<br style="clear:both" />这样的方法，甚至于有人觉得在HTML加标签很low，所以就用JS手动在DOM中插入这样的清除浮动的标签以达到清楚浮动的目的。

但是这样就有点违背了我们提倡的结构-样式-行为分离的原则了。

所以，我认为清除浮动应该在CSS中操作，而不是在HTML或者JS中。

第一种：overflow方法。

这是一种很神奇的方法，我以前学习CSS的时候自己摸索过这种方法，也是发现的除添加标签外的第一种用CSS清除浮动的方法。

这种方法的也用到了hack的原则，兼容IE6。overflow在IE7+才可以用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>overflow清除浮动</title>

<style type="text/css">

	div{

		overflow:hidden;

		background: #f00;

		_zoom:;

	}

	img{

		float:left;

	}

</style>

</head>

<body>

	<div>

		<img src="jike9.jpg" />

	</div>

</body>

</html>

这种方法的优点是代码量比较少

第二种方法是after伪元素选择器法

这种方法用到了CSS-hack方法，可以看以前收集的CSS-hack汇总

点击这里查看hack

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>overflow清除浮动</title>

<style type="text/css">

	div{

		background: #f00;

		*zoom:; /*IE6,IE7*/

	}

	div:after{ /*IE8+*/

		content:'';

		display: table;

		clear:both;

	}

	img{

		float:left;

	}

</style>

</head>

<body>

	<div>

		<img src="jike9.jpg" />

	</div>

</body>

</html>

这两种应该算是除了添加标签外比较常用的清除浮动的方法了。也是很好体现了结构-样式-行为分离原则的方法了。

第三种方法是clear:both

这种方法很容易想，不管是div或者是hr都可以用，定义一个类就好

IE6+以上清除浮动普遍方法总结的更多相关文章

  1. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  2. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  3. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  4. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  5. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  6. CSS清除浮动的方法及优缺点

    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...

  7. 【Web】网页清除浮动的方法

    网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...

  8. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  9. css清除浮动的方法总结

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下     清除浮动是每一个 we ...

随机推荐

  1. 【BZOJ4421】[Cerc2015] Digit Division 动态规划

    [BZOJ4421][Cerc2015] Digit Division Description 给出一个数字串,现将其分成一个或多个子串,要求分出来的每个子串能Mod M等于0. 将方案数(mod 1 ...

  2. jpa双向一对多关联映射

    表结构 Room类 package auth.model; import java.util.HashSet; import java.util.Set; import javax.persisten ...

  3. .NET面试

    作者:最佳菜鸟链接:https://zhuanlan.zhihu.com/p/22224795来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1 .术语 面试出现频率: ...

  4. 【IDEA】单元测试：项目中引入JUnit测试框架+Mock简单了解

    一.Junit 使用和说明: 参考:单元测试第三弹--使用JUnit进行单元测试-HollisChuang's Blog http://www.hollischuang.com/archives/17 ...

  5. svn实现共享文件夹/文件或svn文件夹/文件链接

    我们在实际开发过程中,经常会遇到这种情况,多个项目组使用同一公共底层代码:公共底层代码是有专门负责人开发的,其它项目组只是使用即可,那么多个项目组就需要把公共底层代码放到各自的解决方案或目录文件下,解 ...

  6. etcd跨机房部署方案

    使用ETCD做为元数据方便快捷,但是谈到跨机房灾备可能就迷糊了,我们在做节日灾备的时候同样遇到了问题, 通过查阅官方文档找到了解决方案,官方提供make-mirror方法,提供数据镜像服务 注意: m ...

  7. pycharm的MySQLdb模块导不进去时解决办法

    一.Windows下python2.7安装MySQLdb模块 根据Python多少位下载对应版本: 32位:https://pypi.python.org/pypi/MySQL-python/1.2. ...

  8. Java Concurrent happens-before

    happens-before relation on memory operations such as reads and writes of shared variables. The resul ...

  9. （4.6）sql2008中的group by grouping sets

    最近遇到一个情况,需要在内网系统中出一个统计报表.需要根据不同条件使用多个group by语句.需要将所有聚合的数据进行UNION操作来完成不同维度的统计查看. 直到发现在SQL SERVER 200 ...

  10. day4-迭代器、生成器yield

    一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...