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

2016-02-19 17:20 2 1 收藏

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

【 tulaoshi.com - Web开发 】

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

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

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

  下面的例子作为比较

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

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

  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;}

来源:https://www.tulaoshi.com/n/20160219/1614981.html

延伸阅读
标签: Web开发
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这...
标签: Web开发
最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+CSS的标准开发有了进一步的了解。有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的“闭合浮动元素”的问题: 一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总...
标签: Web开发
New Page 1 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的(我只...
标签: Web开发
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容...

经验教程

446

收藏

52
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部