CSS-高度塌陷问题

Vultr 发布于2019-04-23 11:57 / 1924人阅读

摘要：可以得出产生高度塌陷的原因在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

CSS-高度塌陷问题
- 表现
- 产生的原因
- 高度塌陷的解决办法：
- BFC相关

CSS-高度塌陷问题

表现

例如：

HTML：


    first-child1
    first-child2


    second


    third

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;
}

表现为：

产生的原因

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

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

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

高度塌陷的解决办法：

给父元素设置固定高度。但是使用这种方式后，父元素的高度就不能根据子元素自动撑高了，可以根据自己页面的特点，如果可以固定高度，可以使用这种方式，否则，不推荐这种方式。
额外标签法，这是w3c推荐的解决方案，但是不推荐，因为html的原则是写出语义化的标签，这种方式会额外增加无意义的标签。
```
    first-child1
    first-child2
    
```
父元素的overflow属性（开启元素的BFC）：
```
.clearfix{
    overflow: hidden;
}
```
使用这种方式，属性值可以是非visible（hidden/auto/scroll）中任意，但是建议用hidden。

这种方式副作用较小，这种方式在ie6中不支持，可以外加zoom: 1;
```
.clearfix{
    overflow: hidden;
    zoom: 1;/*针对ie6*/
}
```

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

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

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

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

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

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

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

BFC相关

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

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

父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素

云服务器 GPU云服务器高度随内容变动 css 行高度图片高度未知高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1407.html

理解CSS浮动与清除浮动

摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。本文主要探讨两个问题：为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动，并撑开父元素。起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...

刘东 2019-08-30 12:45 评论0 收藏0
导航条css clear清除浮动解决高度塌陷最终版

摘要：讲清除浮动属性值清除左右元素浮动对本元素造成的影响。代码导航条解决高度塌陷问题最终版利用一个占位，清除浮动对它的影响从而实现解决高度塌陷的问题，但是此方法会在页面结构中加入一个占位标签，影响源码阅读。 63讲导航条css样式导航条 *{ margin:0px; padding:0px; } .nav{ /*去除每个前的大圆点*/ list...

刘厚水 2019-08-02 16:12 评论0 收藏0
导航条css clear清除浮动解决高度塌陷最终版

摘要：讲清除浮动属性值清除左右元素浮动对本元素造成的影响。代码导航条解决高度塌陷问题最终版利用一个占位，清除浮动对它的影响从而实现解决高度塌陷的问题，但是此方法会在页面结构中加入一个占位标签，影响源码阅读。 63讲导航条css样式导航条 *{ margin:0px; padding:0px; } .nav{ /*去除每个前的大圆点*/ list...

lscho 2019-08-29 18:33 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
【零基础入门】css学习笔记（6）清除浮动

摘要：清除浮动，为何要清除浮动浮动效果会带来不好的影响子元素浮动会带来父元素高度塌陷。，清除浮动的两大基本方式，运用清除浮动。元素流入页面时，在这个元素左边右边或两边不允许有浮动内容。除了是用来清除浮动的，其它代码都是为了隐藏掉生成的内容。清除浮动 1，为何要清除浮动浮动效果会带来不好的影响：子元素浮动会带来父元素高度塌陷。具体解释：当浮动框高度超出包含框时，包含框不会自动伸高来闭...

BingqiChen 2019-08-30 15:53 评论0 收藏0