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

冷温柔狗

冷温柔狗

2016-02-19 17:27

下面是个网页CSS技巧:闭合浮动元素超级简单的方法教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。

原理是这样的,外围元素之所以不能很好的延伸,问题出在了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%; ,这个问题就完全解决了。

下面是我做的三个例子作为比较

XHTML:

div id="wrap"
div class="column_left"
h1Float left/h1
/div
div class="column_right"
h1Float 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;}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

CSS教程:闭合CSS浮动元素的几种方法

Web开发
CSS教程:闭合CSS浮动元素的几种方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS:闭合元素和浮动元素的差别

Web开发
CSS:闭合元素和浮动元素的差别

CSS教程:弄懂闭合浮动元素

Web开发
CSS教程:弄懂闭合浮动元素

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS技巧:子元素浮动后父容器的闭合

Web开发
CSS技巧:子元素浮动后父容器的闭合

CSS教程:弄懂闭合浮动元素

Web开发
CSS教程:弄懂闭合浮动元素

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在Word2010中取消自动生成超链接

在Word2010中取消自动生成超链接

CSS+DIV:让文本字符环绕在你的图片周围

CSS+DIV:让文本字符环绕在你的图片周围
下拉加载更多内容 ↓