CSS: 解决Div float后,父Div无法高度自适应的问题
2016-05-18 00:00
471 查看
摘要: 在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),使用如下方法
在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),使用如下方法:
向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人比较喜欢这种方法,因为它简单、实用、浏览器兼容性好,而且这种方法也是W3C推荐的方法
<div style="clear:both;"></div>
或者使用
<br style="clear:both;" />
在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),使用如下方法:
向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人比较喜欢这种方法,因为它简单、实用、浏览器兼容性好,而且这种方法也是W3C推荐的方法
<div style="clear:both;"></div>
或者使用
<br style="clear:both;" />
相关文章推荐
- html5 web数据存储
- SEO
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 前端jquery部分很精彩
- 深入探讨前端框架react
- Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
- 自己动手写的javascript前端等待控件
- 前端必备神器 Snap.svg 弹动效果
- 一张Web前端的思维导图分享
- 一道常被人轻视的web前端常见面试题(JS)
- 浅谈AngularJS--基础
- 浅谈AngularJS--域变量(scope)
- AngularJS' Internals In Depth(深入理解 AngularJS)
- 3ff8 javascript 获取Flash下载进度兼容IE, FireFox,Chrome浏览器
- CSS清除浮动常用方法小结
- window.external 的用法(收藏夹功能)
- document.all用法