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

关注沭阳法院

关注沭阳法院

2016-02-19 17:20

今天图老师小编给大家展示的是闭合浮动元素(clearing float)的简单方法,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

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

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

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

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

  下面的例子作为比较

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

  XHTML代码:

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

展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

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

float闭合(清除浮动)和CSS HACK

Web开发
float闭合(清除浮动)和CSS HACK

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

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

lol偷钱流符文搭配推荐

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

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

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

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

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

lolAD刺客新符文搭配推荐

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

向所有美好旳 旧日时光致谢 - QQ伤感分组

向所有美好旳 旧日时光致谢 - QQ伤感分组

我爱你,不是说说而已 - QQ情侣分组

我爱你,不是说说而已 - QQ情侣分组
下拉加载更多内容 ↓