高度塌陷

2017-01-02 19:22:20来源:cnblogs.com作者:ganchuanpu人点击

第七城市

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以及以下版本都不兼容。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广。

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台