闭合浮动元素超级简单的方法
无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了.
关于闭合浮动元素（clearing float）的方法现在已经很多了，你还不了解的话去old9的blog看看，有一篇闭合浮动元素。
这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。原文在：http://annevankesteren.nl/2005/03/clearing-floats
原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释
引用内容：
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
现在只要将给外围元素添加一个overflow:auto;就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ie的问题了，再加上_height:1%; ，这个问题就完全解决了。
下面是我做的三个例子作为比较
1.没有闭合浮动元素
2.非IE下闭合浮动元素
3.完全闭合元素
Super simple clearing floats
#wrap_three{ border:6px #ccc solid; overflow:auto;_height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
-->
Float left
这个层左浮动
.column_left{ float:left; width:20%; padding:10px;}
Float right
这个层右浮动,下面是完整的CSS，这是一个外围wrap_three层应用overflow:auto;加_height:1%;闭合浮动的模型。外围容器可以正常延伸。IE6.0、Firefox 1.5和Opera 9.0都通过了测试。
#wrap_three{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
闭合浮动元素超级简单的方法
无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了. 关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素. 这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁.现在我看到有个方法超级简单.赶紧介绍一下.原文在:http://annevankesteren.nl/2005/03/clearing-floats 原理是这样的,外围元素之所
-
ie7+背景透明文字不透明超级简单的实现方法
如果你现在还在为背景透明文字不透明而发愁的话,建议你来看看.当然IE6我已经放弃了,所以不要说不用PNG8的图片这样在IE6下没有效果,当然你也可以用滤镜.本人不建议使用滤镜.因为这样可能会出现其它问题!(如无法点击等等问题)做前端最怕的就是BUG,特别是IE6.滚蛋IE6!本文的核心就是利用PNG32透明图片来做背景然后平铺背景就行了.这样就不会存在背景透明文字也透明了.这样做起来超级简单你们说呢!图片只需要调整透明度即可.在PSD中把图片设置为20%的透明度保存为png就行了.(切忌:不要设
-
python 循环遍历字典元素的简单方法
一个简单的for语句就能循环字典的所有键,就像处理序列一样: In [1]: d = {'x':1, 'y':2, 'z':3} In [2]: for key in d: ...: print key, 'corresponds to', d[key] ...: y corresponds to 2 x corresponds to 1 z corresponds to 3 在python2.2之前,还只能用beys等字典方法来获取键(因为不允许直接迭代字典).如果只需要值,可以使用d.val
-
JavaScript清空数组元素的两种方法简单比较
本文实例讲述了JavaScript清空数组元素的两种方法简单比较.分享给大家供大家参考.具体分析如下: JavaScript中数组清空有多种方法: var arr = [1, 2, 3]; arr = [];//方法一 arr.length = 0;//方法二 arr = null;//方法三 delete arr;//方法四 这里比较最常用的第一种和第二种 var arr = [1, 2, 3]; // 方法一 // 优点:如果有其他地方用到了数组arr中的元素,这种方法相对来说更安全.并且也
-
使用js获取地址栏参数的方法推荐(超级简单)
方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; }
-
JS选取DOM元素的简单方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElemen
-
js获取元素的外链样式的简单实现方法
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样
-
超级简单的jquery操作表格方法
本文实例讲述了超级简单的jquery操作表格方法.分享给大家供大家参考.具体实现方法如下: 利用jquery给指定的table添加一行.删除一行 复制代码 代码如下: <script language="javascript" src="./jquery.js"></script> <table border="1px #ooo" id="test" name="test" c
-
Android Studio 超级简单的打包生成apk的方法
本文介绍了Android Studio 超级简单的打包生成apk,分享给大家,也给自己留个笔记. 为什么要打包: apk文件就是一个包,打包就是要生成apk文件,有了apk别人才能安装使用.打包分debug版和release包,通常所说的打包指生成release版的apk,release版的apk会比debug版的小,release版的还会进行混淆和用自己的keystore签名,以防止别人反编译后重新打包替换你的应用. 简单点说就是给你的apk发身份证,上户口,防止和你长的一样的人,假冒你.这里
-
css如何让浮动元素水平居中
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家. 方法一: 1.HTML 部分: <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p> </div> 2.CSS 部分: .box{ float:left;