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 ...
随机推荐
- mysql查询某周的起始日期和终止日期
select subdate(curdate(),date_format(curdate(),'%w')-1) select subdate(curdate(),date_format(curdate ...
- 哈哈哈 迫于c#的语言特性java才加的注解
- JDK源码分析之concurrent包（二） -- 线程池ThreadPoolExecutor
上一篇我们简单描述了Executor框架的结构,本篇正式开始并发包中部分源码的解读. 我们知道,目前主流的商用虚拟机在线程的实现上可能会有所差别.但不管如何实现,在开启和关闭线程时一定会耗费很多CPU ...
- Understanding Tensorflow using Go
原文: https://pgaleone.eu/tensorflow/go/2017/05/29/understanding-tensorflow-using-go/ Tensorflow is no ...
- MonogoDB----Date()
以字符串或日期对象的形式返回日期. 使用new Date(),插入的是一个isodate类型:而使用Date()插入的是一个字符串类型. 那isodate是什么日期类型的?我们看这2个值,它比字符串大 ...
- 巨蟒python全栈开发-第12天 生成器函数 各种推导式 yield from
一.今日主要内容总览(重点) 1.生成器(目的:帮助我们创建对象) (1)生成器的本质就是迭代器 (2)一个一个的创建对象 (3)创建生成器的方式: 1.生成器函数 2.通过生成器表达式来获取生成器 ...
- SET NAMES 'charset_name'
设置写入db和db返回读出结果的字符集character set https://dev.mysql.com/doc/refman/5.7/en/charset-connection.html SET ...
- sql语句select group by order by where一般先后顺序
写的顺序:select ... from... where.... group by... having... order by..执行顺序:from... where...group by... h ...
- gophercloud openstack networking 源码分析
1.network 部分 // Package networks contains functionality for working with Neutron network resources. ...
- 《深入理解Linux内核》阅读笔记 --- 第四章 中断和异常
1.中断的作用:中断信号提供了一种方式,使处理器转而去运行正常控制流之外的代码.当一个中断信号到达时,CPU必须停止它当前所做的事,并切换到一个新的活动.为了做到这一点,就要在内核态堆栈保存程序计数器 ...