• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

前端 搞代码 7年前 (2018-06-17) 158次浏览 已收录 0个评论

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

欢迎大家阅读《闭合浮动元素(clearing float)的简单方》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:闭合浮动元素(clearing float)的简单方

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址