高度塌陷
2018-06-24 00:52:18来源:未知 阅读 ()
1.概念
父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置将会上移,导致整个页面的布局混乱
2.方法一
在塌陷的父元素的最后添加一个空白的div,然后对该div进行清除浮动
<div class="box1"> <div class="box2"></div> <div style="clear:both"></div> </div>
使用这种方式会在页面中添加多余的结构
3.方法二
使用after伪类,向父元素后添加一个块元素,并对其清除浮动
.clearfix:after{ content:""; display:block; clear:both; } .clearfix{ zoom:1; }
该种方式的原理和方法二原理一样,但是不用向页面中添加对于的结构
其中zoom:1还是只兼容ie6,:after是css中的伪类,ie6以及以下版本都不兼容。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 整理高度塌陷与BFC 2020-05-06
- CSS中的一些细节 2020-04-17
- 4.CSS中float导致的高度坍塌问题及解决方法 2020-04-09
- CCS中的margin:top塌陷问题 2020-03-27
- CSS核心概念之盒子模型 2020-03-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash