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 ...
随机推荐
- 让select下的option选中
这里以默认选中当前月为例: HTML: 性别 <select name="sex" id="sex"> <option value=" ...
- python系列十七：Python3 标准库概览
#!/usr/bin/python #-*-coding:gbk-*- #Python3 标准库概览'''操作系统接口os模块提供了不少与操作系统相关联的函数.建议使用 "import os ...
- ES6通过Set数组去重
一.Set 1.定义 Set对象是ES6中新定义的数据结构,类似于数组,它允许你存储任何类型的唯一值,不管是原始值还是对象引用. 2.语法 new Set([iterable]) iterable:可 ...
- 面向对象 - 封装/property - 总结
面向对象 - 封装: 封装:在类定义阶段,以__开头的属性名发生了变形 eg: __x --> _A__x / __foo --> _A__foo 1.特点: 1.在类外部无法直接访问 _ ...
- 兼容获取元素当前样式 currentStyle || getComputedStyle
function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...
- Tomcat的session
创建session 在具体说明session的创建过程之前,先看一下BS访问模型: browser发送Http request: tomcat内核Http11Processor会从HTTP requ ...
- android studio中取消关联git
Android studio取消关联Git 步骤如下 settings->version control 这里是已经取消关联的 如果关联 按住减号即可
- 用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...
- corethink功能模块探索开发（十七）opencmf.php 配置文件
图样: opencmf.php存在于每个模块的根目录,是模块配置文件. 能进行持久化配置参数保存,一开始我以为是写文件或者做缓存,后来在数据库中发现admin_module表,存储了每个模块的配置参数 ...
- day3-set集合
set是一个无序且不重复的元素集合 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...