高度塌陷

2018-06-24 00:52:18来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

下一篇:Flexible 弹性盒子模型之CSS flex-shrink 属性