首页 > 代码库 > 父元素高度塌陷的解决办法
父元素高度塌陷的解决办法
很多时候子元素浮动的,会造成父元素塌陷
解决方法
1.添加一个空元素,并设置成清除浮动,即:
<div style="clear:both;"></div>
优点:通俗易懂,易于掌握
缺点:添加了无意义标签,不易于后期维护,违背了结构和表现的标准
2.给父元素添加 overflow:auto;
3.给父元素也浮动
缺点:影响整体页面布局,若父元素也有父元素呢?
4.使用after伪元素
给父元素添加一个类,即看不见的清除浮动的元素
.clearfix:after { content:"."; dispaly:block; height:0; clear:both; visibility:hidden; }
5.最优解
首先我们说一个CSS的概念——BFC块级格式上下文,简单来说就是只要属性或方法触发了BFC就可以防止高度塌陷.
以下属性就是可以触发BFC的部分
flaot:left;
overflow:auto;
dispaly:table-cell;
dispaly:table-caption;
display:inline-block;
position:fixed;
position:absolute;
前面几个方法也是借助了这个原理,但都有些缺陷。下面我们来介绍一个比较优雅的方法来实现。
.clearfix:after, .clearfix:before { content: " "; display:table; } .clearfix:after { clear:both; }
加入before对于清除浮动没有影响,主要是为了解决浏览器顶部空白崩溃的问题。
例如:现有上下两个盒子,上盒子设置了margin-bottom:10px,下盒子设置了margin-top:10px,按理说两个盒子的上下距离应该是20px,但实际上只有10px,两个盒子的外边距会发生一个叠加。
父元素高度塌陷的解决办法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。