zoukankan      html  css  js  c++  java
  • 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:1;
    	}
    	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:1; /*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都可以用,定义一个类就好

  • 相关阅读:
    Ubuntu 20.04下EasyConnect兼容性问题临时解决方案
    Ubuntu 20.04 LTS安装搜狗输入法,只需三条命令,还能自动更新
    Java笔记: 继承成员覆盖和隐藏
    Java扫雷游戏: JMine
    Emacs: 设置窗口标题格式
    Java笔记: protected的真正含义
    Java笔记: 初始化块
    Ubuntu跨版本安装软件
    百度编辑器 Ueditor 增加字体
    AspCms 升级百度编辑器
  • 原文地址:https://www.cnblogs.com/manfredHu/p/4639570.html
Copyright © 2011-2022 走看看