清风细雨楼

浅谈CSS 高度塌陷问题
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

表现

例如：

HTML：

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
</div>
<div class="second">
    second
</div>
<div class="third">
    third
</div>

CSS：

.first{
    width: 300px;
    background-color: pink;
}
.first .first-child1,.first .first-child2{
    float: left;
    width: 100px;
    height: 100px;
}
.first .first-child1{
    background-color: purple;
    margin-right: 10px;
}
.first .first-child2{
    background-color: red;  
}
.second{
    width: 200px;
    height: 150px;
    background-color: blue;
}
.third{
    width: 100px;
    height: 150px;
    background-color: green;
}

表现为：

浅谈CSS 高度塌陷问题

产生的原因

由上面的例子可以看出，first盒子没有设置高度，由子元素撑开，但是由于子盒子设置了浮动，脱离了标准流，所以导致first盒子没有高度，表现为second和third盒子向上移动了。

可以得出产生高度塌陷的原因：

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

高度塌陷的解决办法：

1、给父元素设置固定高度。但是使用这种方式后，父元素的高度就不能根据子元素自动撑高了，可以根据自己页面的特点，如果可以固定高度，可以使用这种方式，否则，不推荐这种方式。

2、额外标签法，这是w3c推荐的解决方案，但是不推荐，因为html的原则是写出语义化的标签，这种方式会额外增加无意义的标签。

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
    <div style="clear: both;"></div>
</div>

3、父元素的overflow属性（开启元素的BFC）：

.clearfix{
    overflow: hidden;
}

使用这种方式，属性值可以是非visible（hidden/auto/scroll）中任意，但是建议用hidden。

这种方式副作用较小，这种方式在ie6中不支持，可以外加zoom: 1;

.clearfix::after{
    content: "";/*伪元素内容为空*/
    display: block;/*非默认的就行，也可以是table等等*/
    height: 0;/*伪元素高度为0，不影响其他元素*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*不可见*/
}
.clearfix{
    zoom: 1;/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/
}

4、单伪元素after清除浮动（开启元素的BFC）：

.clearfix::after{
    content: "";/*伪元素内容为空*/
    display: block;/*非默认的就行，也可以是table等等*/
    height: 0;/*伪元素高度为0，不影响其他元素*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*不可见*/
}
.clearfix{
    zoom: 1;/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/
}

这种方式现在使用比较广泛，很多大网站都是使用这种方式，副作用较小，只需要在配合处理ie6就可以了。

5、双伪元素清除浮动（开启元素的BFC）：

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/
}

这种做法写法比较麻烦，也不推荐。

清除浮动对父元素的影响后的效果：

浅谈CSS 高度塌陷问题

BFC相关

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com