闭合浮动元素(clearing float)的简单方法

  关于闭合浮动元素(clearing float)的方法现在已经很多了,个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看上去不够简洁。

  这一方面的原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ID的问题了,再加上“_height:1%”,这个问题就完全解决了。

  下面的例子作为比较

  1、没有闭合浮动元素;2、非IE下闭合浮动元素;3、完全闭合元素。相关代码如下:

  XHTML代码:

<div id="wrap">
<div class="column_left">
 <h1>Float left</h1>
</div>
<div class="column_right">
 <h1>Float right</h1>
</div>
</div>

  CSS样式:

#wrap{ 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;}

时间: 2024-08-23 21:53:39

闭合浮动元素(clearing float)的简单方法的相关文章

网页CSS技巧:闭合浮动元素超级简单的方法

css|浮动|技巧|网页 关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素. 这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁.现在我看到有个方法超级简单.赶紧介绍一下. 原理是这样的,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见.见W3C的解释:In addition, if the element has any

web标准化:闭合浮动元素超级简单的方法

web|web标准|浮动 外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见,见W3C的解释.现在只要将给外围元素添加一个overflow:auto;就可以解决问题,结果是除了IE,真的可以解决.下来就要解决ie的问题了,再加上_height:1%; ,这个问题就完全解决了. 下面是我做的三个例子作为比较 1.没有闭合浮动元素2.非IE下闭合浮动元素3.完全闭合元素 代码如下: XHTML<div id="wrap"> <div c

闭合浮动元素的方法

关于闭合浮动元素(clearing float)的方法现在已经很多了,个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看上去不够简洁. 这一方面的原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释).现在只要将给外围元素添加一个"overflow:auto",就可以解决问题,结果是除了IE,真的可以解决.下来就要解决ID的问题了,再加上"_height:1%"

总结网页制作中闭合浮动元素的几个方法

浮动|网页 在页面制作过程当中,我们曾经遇到过这样的问题,当浮动元素高度增加,而超出其父容器时,父容器不会随着它的高度增加而变长.比如 <div id="main">   <div id="box1">box1</div>   <div id="box2">box2</div>   <div class="clean"></div> </

CSS规范 闭合浮动元素介绍

css|浮动|规范 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢.后来又有了一种新的方式,使用 :after 伪类

CSS规范学习:闭合浮动元素

css|浮动|规范 闭合浮动元素 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢. 后来又有了一种新的方式,使用 :

学习CSS:我们一起认识CSS闭合浮动元素

css|浮动 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢.后来又有了一种新的方式,使用 :after 伪类动态的

CSS技巧学习:我们一起认识CSS闭合浮动元素

css|浮动|技巧 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢.后来又有了一种新的方式,使用 :after 伪类

CSS闭合浮动元素介绍

css|浮动 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢.后来又有了一种新的方式,使用 :after 伪类动态的