DIV无法自动高度 IE8无法自动高度

所属分类: 网页制作 / CSS 阅读数: 1434
收藏 0 赞 0 分享
额外标签法
  这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人不喜欢这种方法,但是它确实是W3C推荐的方法:
<div style="clear:both;"></div>
或者使用
<br style="clear:both;" />
使用after伪类
  这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

  这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。

复制代码
代码如下:

#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

设置overflow为hidden或者auto {IE8常见内部浮动外部高度不适应解决方法}
  这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面

浮动外部元素,float-in-float
  这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。
更多精彩内容其他人还在看

CSS去除移动端点击时元素产生的背景色 (推荐)

这篇文章主要介绍了CSS去除移动端点击时元素产生的背景色 (推荐),代码很简单,需要的朋友跟随小编一起看看吧
收藏 0 赞 0 分享

详解CSS Sprite雪碧图的应用

这篇文章主要介绍了详解CSS Sprite雪碧图的应用,CSS雪碧图该方法是将多个小图标和背景图像合并到一张图片上,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

css和html的四种结合方式

这篇文章主要介绍了css和html的四种结合方式,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS3 Flex 弹性布局实例代码详解

这篇文章主要介绍了CSS3 Flex 弹性布局实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯css3实现思维导图样式示例

思维导图又称之为脑图,本篇文章主要介绍了使用css3实现思维导图样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用CSS属性选择器来拼接HTML的DNA的方法

CSS属性选择器非常神奇,它们可以帮你避免添加数不胜数的类名,从另一方面来指出你代码里的一些问题。接下来通过本文给大家介绍使用CSS属性选择器来拼接HTML的DNA的方法,需要的朋友参考下吧
收藏 0 赞 0 分享

css文本两端对齐的实现代码

这篇文章主要介绍了css文本两端对齐的实现代码,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS多级菜单的实现代码

这篇文章主要介绍了CSS多级菜单的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS未知高度垂直居中的实现

这篇文章主要介绍了CSS未知高度垂直居中的实现,详细的介绍了几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS 、JS实现浪漫流星雨动画

这篇文章主要介绍了CSS 、JS实现浪漫流星雨动画的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多