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 ...
随机推荐
- TCL V7300A-3D升级教程
鄙人的电视型号: 机器软件版本:V8-0MT-3201-LF1V028_000 3201是机芯 v028是版本号 设备型号:cn_mt32-v7300a-3d TCL电视升级有三个:本地.网络.自动 ...
- Canvas-图片填充-预加载
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Powershell 脚本调用方法
方法一: Get-Content "D:\PowershellScripts\Test\ErrorMailNotice.ps1" | Invoke-Expression 方法二: ...
- 修改SQL Server 数据库的编码
ALTER DATABASE [dbnam] collate SQL_Latin1_General_CP1_CI_AS 查询编码号:SELECT COLLATIONPROPERTY('SQL_Lati ...
- mfc 对话框程序 托盘实现
1 在头文件里面定义 消息 #define WM_SHOWTASK WM_USER+10 在主窗口类里面定义 一个变量 两个函数 a 变量 托盘结构体的变量 NOTIFYICONDATA m_nid; ...
- 标准编译安装（configure make）
./configure --prefix=安装目录 这里注意,安装目录可以自己选择地方,但是自己选择地方的话就要把编译出的bin.include.lib三个文件夹分别加入XXX XXX XXX三个 ...
- 我的Android进阶之旅------>Java字符串格式化方法String.format()格式化float型时小数点变成逗号问题
今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.好吧,又是我来维护. 好吧,先把系统语言切换到波兰语,切换到波兰语的方法查看文章 我的And ...
- Linux（4）- centos7安装python3、Linux下安装、配置virtualenv、确保开发环境的一致性、虚拟环境之virtualenvwrapper、vim
一.centos7安装python3 1.下载python3的源码包 下载地址:https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz cd ...
- Django的模型层（2） - 多表操作（下）
一.多表查询 1.基于双下划线的跨表查询 Django 还提供了一种直观而高效的方式在查询(lookups)中表示关联关系,它能自动确认 SQL JOIN 联系.要做跨关系查询,就使用两个下划线来链接 ...
- CentOS7.1 KVM虚拟化之linux虚拟机安装(2)
一.上传ISO文件到/data/iso下 这里使用CentOS-5.5-i386-bin-DVD.iso 二.安装CentOS5.5 CentOS7.1 安装KVM虚拟机默认磁盘格式为qcow2(推荐 ...