高度塌陷的问题：

 

　　当开启元素的BFC以后，元素将会有如下的特性：

 

　　1父元素的垂直外边距不会和子元素重叠

 

　　开启BFC的元素不会被浮动元素所覆盖

 

　　开启BFC的元素可以包含浮动的子元素

 

　　那么如何开启元素的BFC？

 

　　设置元素浮动

 

　　设置元素绝对定位

 

　　设置元素为inline-block

 

　　float:left;(不好)虽然可以撑开父元素会导致父元素宽度丢失了；而且使用这种方式导致下边的元素上移。

 

　　display:inlink-block;布局好了，但是宽度又没有了。但是会导致宽度丢失，不推荐使用这种方式。

 

　　元素的overflow设置非visible值：

 

　　overflow:auto;解决父元素高度塌陷副作用最小的。

 

　　兼容性

 

　　在IE6中没有BFC,但是具有另一个隐含的属性叫hasLayout.

 

　　该属性的作用和BFC类似，所在IE6浏览器通过开启hasLayout来解决问题。

 

　　方式：

 

　　元素的zoom设置为1即可：zoom:1

 

　　在IE6中如果为一个元素指定了一个宽度，则会默认开启一个

 

　　hasLayout.

 

　　clear:both清楚对他影响最大的那个元素的浮动

 

　　解决高度塌陷的方案二

 

　　可以直接在高度塌陷的父元素的最后，添加一个空白的div

 

　　由于这个div并没有浮动，他是可以撑开父元素高度的

 

　　然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用

 

　　虽然可以解决问题啊，但是在页面中添加多余的结构。

 

　　通过after伪类设置为块级元素清除两边浮动解决父类塌陷的问题

 

　　通过after伪类，选中box1的后边

 

　　

 

　　.box1:after{

 

　　content:"";

 

　　display:block;

 

　　//清除两侧的浮动

 

　　clear:both;

 

　　}

 

　　/*IE6不支持伪类。zoom:1;*/

 

　　.clearfix:after{

 

　　/*添加一个内容*/

 

　　content:"";

 

　　/*转换为一个块元素*/

 

　　display:block;

 

　　/*清除两侧的浮动*/

 

　　clear:both;

 

　　}

 

　　/*在IE6中不支持after伪类，

 

　　所以在IE6中还需要使用hasLayout来处理*/

 

　　.clearfix{

 

　　zoom:1;

 

　　}

 

　　IE6中如果上面的是内联元素也是浮不上去的

 

　　终极版：

 

　　//经过修改后的clearfix是一个多功能的

 

　　//既可以解决高度塌陷，又可以确保父元素

 

　　和子元素的垂直外边距重叠

 

　　.clearfix:before,

 

　　.clearfix:after{

 

　　content:"";

 

　　display:table;

 

　　clear:both;

 

　　}





本文转载自中文网