IE6+以上清除浮动普遍方法总结
浮动，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汇总
<!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+以上清除浮动普遍方法总结的更多相关文章
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- CSS清除浮动的方法及优缺点
浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...
- 【Web】网页清除浮动的方法
网页中,经常用浮动的div来布局,但是会出现父元素因为子元素浮动引起内部高度为0的问题,为了解决这个问题,我们需要清除浮动,下面介绍4中清除浮动的方法. 在CSS中,clear属性用户清除浮动,语法: ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
随机推荐
- 基于Web和二维码的文件传输服务
在工作中难免需要对外提供一些我们抓取的log或者操作视频之类的资料,但由于工作环境日渐规范和严格,公司的网络环境和客户的网络环境是被独立开来的.这样做的好处不必多说,但同时也给我们工作带来的诸多不便. ...
- matplotlib图像中文乱码(python3.6)
方法一:(在代码中添加如下代码) import matplotlib #指定默认字体 matplotlib.rcParams['font.sans-serif'] = ['SimHei'] matpl ...
- [Android]反编译apk + eclipse中调试smali
从来没有想过反编译apk是来的如此方便,并且还可以修改后重新编译运行,这比在win下修改pe容易多了,感谢apktool和smali工具的作者提供这么好的工具. 跟踪apk一般的做法是在反编译的sma ...
- InnoDB缓存读命中率、使用率、脏块率(%) 缓冲池的读命中率(%) 缓冲池的利用率(%) 缓冲池脏块的百分率(%)
InnoDB缓存读命中率.使用率.脏块率(%) 缓冲池的读命中率(%) 缓冲池的利用率(%) 缓冲池脏块的百分率(%)
- Linux基础命令(三)
作业一:1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group >/1.txt 2) 将用户信息数据库文件和用户 ...
- caffe使用（1）
caffe使用 caffe是一个卓越的CNN框架 caffe源码是Cpp语言的,基于一些外部的库,包括BLAS(矩阵计算),CUDA(GPU驱动),gflags,glog,boost,protobuf ...
- MongoDB-3： 查询（一）
一.简介 MongoDB提供了db.collection.find() 方法可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段. 二．db.collection.fi ...
- redis 字符串和集合操作
字符串 redis中的String在在内存中按照一个name对应一个value来存储 set() #在Redis中设置值,默认不存在则创建,存在则修改 r.set('name', 'zhangsan' ...
- java jacob调用打印，word，excel横向打印
public static boolean printOfficeFile(File f) { if (f != null && f.exists()) { String fileNa ...
- Java中的字符串不变性
原文链接:http://www.programcreek.com/2009/02/diagram-to-show-java-strings-immutability/ (图片出处和内容参照) 1.声明 ...