闭合浮动元素超级简单的方法

ttx9n · 发表于 2006-8-12 00:00:00

无意中看到的一个非常不错的小技巧.是关于用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.完全闭合元素

<P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Super simple clearing floats</title>
<style type="text/css">

</style>
</head></P>
<P><body>

<h1>Float left</h1>
  <p>这个层左浮动</p>
  <code>.column_left{ float:left; width:20%; padding:10px;}</code>
 
  
  <h1>Float right</h1>
 <p>这个层右浮动,下面是完整的CSS，这是一个外围wrap_three层应用<em>overflow:auto;</em>加<em>_height:1%;</em>闭合浮动的模型。外围容器可以正常延伸。IE6.0、Firefox 1.5和Opera 9.0都通过了测试。 </p>
 <code> #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;}</code>

</body>
</html>
</P>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

wangdj110 · 发表于 2022-8-25 12:17:34

额UI废物iuhfujewfiewnnfen

kwa3hgmjp · 发表于 2023-1-20 11:29:50

的vgdsvsdvdsvdsvds

8ayoqrpj · 发表于 2023-4-11 14:56:45

天天源码论坛

0608fv3 · 发表于 2023-9-12 17:12:31

哈哈哈哈哈哈哈

gc4hg · 发表于 2023-9-17 00:00:44

的谁vdvdsvdsvdsdsv

sykzus · 发表于 2023-9-28 15:28:33

收下来看看怎么样

3mfwk4yf · 发表于 2024-3-30 11:26:40

挺不错的东西

gc4hg · 发表于 2024-6-8 02:39:53

人都不在了啊啊

qzdhcgs · 发表于 2024-8-16 02:07:16

8888888888888888

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] 闭合浮动元素超级简单的方法

相关帖子