建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

CSS弄懂闭合浮动元素

更新时间:2017-01-08整理编辑:建站学习网阅读:0

  按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢?

  有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢。

  后来又有了一种新的方式,使用:after伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用CSS生成,但考虑到IE不支持:after不得不做了不少的hack。这种方法兼容性一般,但经过各种hack也可以应付不同浏览器了,同时又可以保证html比较干净,所以用得还是比较多的。

  再后来又有人发现将父容器的overflow设为除visible之外的值就可以在标准兼容浏览器中闭合浮动元素,IE自然又是不支持的,所以这种方法和上一种方法一样都对IE做了不同处理(具体就是触发layout),不同的就是overflow没有:after伪类那么麻烦了,缺点也有,overflow可能会产生一些小冲突。

  在使用overflow之前还有过一种使用float的方法,就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在IE/Win和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。使用float虽然在IE和标准兼容浏览器中都能闭合浮动元素,但原理却是不同的,IE/Win中float触发了layout因而闭合了浮动,而在标准兼容浏览器中,float其实和上一种方法中的overflow原理一样,产生了一个“块级格式化范围“——这是CSS规范中提到的一种现象,它往往具有某种独立性,特性之一就是会自动闭合内部的浮动元素。

  按照规范,以下类型的元素会产生一个块级格式化范围:

  ●浮动元素,left或者right皆可。

  ●绝对定位的元素。

  ●inline-block元素,不过这个gecko目前不支持。

  ●table-cell类型元素,其实table,table-head-group,table-row什么的也都可以,还有inline-table(gecko不支持)也同样,因为他们都会间接产生一个匿名的table-cell。

  ●overflow取值非visible的元素。

  所以,原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素,而且只需要CSS,无需其他。顺带说一下以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。

  而对于IE/Win,它有一套自己的体系,就是layout,具有layout的元素会自动闭合浮动元素,再来看看触发layout的CSS属性,会发现和上面的块级格式化范围有很多类似之处:

  ●浮动元素

  ●绝对定位元素

  ●display:inline-block

  ●zoom

  ●width/height

  ●overflow/overflow-x/overflow-y[IE7新增]

  ●max/min-width/height[IE7新增]

  以上来看IE中闭合浮动元素的方法也不少,自然也都有其局限性,要么有附带效果,要么使用的是非标准属性(无法通过验证)。

  还要提一点的是display:inline-block,这个属性对IE而言本身没什么用,实际效果只是给一个元素暗地添加了layout,但是标准兼容浏览器是认得这个属性的,所以要不影响这些浏览器,需要将display设回默认。这里IE有一个bug,如果先定义了display:inline-block,然后再将display设回block(这两个display要先后放在两个CSS声明中才有效果),那么layout不会消失,同时也不会影响其他浏览器,所以目前来说,这也算一个不错的触发layout的方法:

  .gainlayout{display:inline-block;}

  .gainlayout{display:block;}

  所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些CSS属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有clear可以用嘛。

本文网址:https://www.dedexuexi.com/divcss/jc/2262.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
box-sizing让CSS布局更加直观
« 上一篇2017年01月08日
教你制作完美的Favicon图标
2017年01月08日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询