请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 247|回复: 9

闭合浮动元素的方法

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-20 22:21:54 | 显示全部楼层 |阅读模式

关于闭合浮动元素(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;}
回复

使用道具 举报

2

主题

978

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2017-2-15 15:23:16 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

2

主题

943

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2017-5-7 10:20:04 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

893

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2017-8-14 18:47:22 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

0

主题

661

帖子

102

积分

注册会员

Rank: 2

积分
102
发表于 2017-12-6 15:02:45 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

0

主题

923

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2018-5-20 16:17:36 | 显示全部楼层
还有许多问题不明白,有点恼火啊!
回复 支持 反对

使用道具 举报

1

主题

917

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2018-6-9 16:17:25 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

1

主题

1051

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2018-9-20 10:30:34 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

2

主题

943

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2018-11-16 14:52:45 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

0

主题

883

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 昨天 09:07 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-12-19 22:15 , Processed in 0.227423 second(s), 31 queries .

快速回复 返回顶部 返回列表