全方位清理浮动(解决浮动元素的父元素自适应高度)
来源:互联网 发布:查看linux服务器配置 编辑:程序博客网 时间:2024/06/05 04:29
http://blog.csdn.net/wwwyan/article/details/5611098
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包 含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢?
下面是几种处理问题的方法:
1、就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的 (而且通常是无语义的)标签。
2、使用 :after 伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用 CSS 生成,但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证 html 比较干净,所以用得还是比较多的。
3、将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素,IE自然又是不支持的,所以这种方法和上一种方法一样都对 IE 做了不同处理(具体就是触发layout),不同的就是overflow 没有 :after 伪类那么麻烦了,缺点也有,overflow 可能会产生一些小冲突。
4、还有过一种使用 float 的方法,就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元 素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素,但原理却是不同的,IE/Win 中 float 触发了 layout 因而闭合了浮动,而在标准兼容浏览器中,float 其实和上一种方法中的 overflow 原理一样,产生了一个“块级格式化范围”——这是CSS 规范中提到的一种现象,它往往具有某种独立性,特性之一就是会自动闭合内部的浮动元素。
- 全方位清理浮动(解决浮动元素的父元素自适应高度)
- 全方位清理浮动(解决浮动元素的父元素自适应高度)
- 子元素浮动 父元素自适应高度
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- 解决子元素浮动父元素高度为0
- 子元素浮动后,两个子元素高度不一样,父元素自适应高度,子元素自适应为相同高度
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- 子元素浮动后父级元素高度自适应高度
- 解决子元素用css float浮动后父级元素高度自适应高度
- 清除浮动-解决父级元素高度不能适应子级元素高度的问题
- 三种方法解决浮动元素父容器高度自适应问题
- 浮动子元素的父元素高度为0,怎么办
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 子元素浮动父容器高度不能自适应的CSS解决方法
- Android调用Camera摄像机拍照
- Eclipse中在线安装ADT失败,几种其他解决方法
- 关于C语言中的按位与(&)按位或(|)按位异或(^)取反(~)左移(<<)右移(>>)
- Log4j相关文章
- wince 实现 上下键控制TAB
- 全方位清理浮动(解决浮动元素的父元素自适应高度)
- 各cpu支持neon的编译选项
- select-c:forEach 数据的默认选中
- 嵌入式软件工程师笔试必看经典题
- 创新的现有模式
- 0916java
- 刚毕业的码农
- http://blog.csdn.net/hoya5121/article/details/5497896
- Android自动化测试—Robotium学习笔记(1)