高度坍塌的产生条件和解决方法

根源：常规流块盒在计算高度时会无视浮动盒子

产生条件：

没有固定高度 的父元素里有浮动元素 时就可能会出现高度坍塌，让原本属于自己的高度没有计算到自己的高度之内。这里分为几种情况，均为个人的理解：

子元素全为浮动元素时，会出现高度坍塌的现象
当子元素为常规流块盒和浮动元素并在同一行时

如果浮动元素的高度小于块盒的高度，那么不会出现高度坍塌；
如果浮动元素的高度大于块盒高度时就会发生高度坍塌。

当子元素为常规流块盒和浮动元素并不再同一行时，也会出现高度坍塌。

解决方法：

给父元素固定高度

这个高度应该包含所有子元素，包括浮动元素

【适合高度固定的页面布局，不适合自适应布局】

清除浮动

在父元素结构的最后面添加一个块盒（必须是块盒，浮动影响的是块盒），给添加的块盒设置clear声明

【会给结构多增加一个节点，影响渲染速度】

div{clear:both;
}

给父元素添加伪元素after，把伪元素转换为块盒并添加clear声明

【属于万能清除法，并可以写到类选择器里简化代码，供多个元素使用】

.clearfix::after{content:"";       //内容为空display:block;    //必须转为块盒clear属性才能生效clear:both;      //清除浮动
}

触发父元素为BFC

让父元素浮动

【会影响和父元素同级的其他元素】

给父元素添加定位（绝对定位和固定定位）

【定位后会脱离文档流，会影响了页面布局】

给父元素添加声明overflow

overflow的值不可以是visible

【影响了自身功能】

更改父元素display属性值

display的值可以是 table-cell 、table-caption 、 inline-flex 、 flex

【会影响子元素的显示效果】

补充：

定位元素（绝对定位和固定定位）也会使父元素高度坍塌

因为绝对定位和固定定位也会使元素脱离文档流

解决方法只能给父元素设置足够高度

高度坍塌的产生条件和解决方法相关推荐

高度塌陷的产生原因及解决方法
什么是高度塌陷? 当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题. 父元素高度塌陷后,父元素以下的元素都会向上移动,导致 ...
HTTP status Code 412 未满足前提条件的解决方法之一
最近网站老是报告错误. ajax返回状态为 error 思来想去不知道为啥. 后来跟踪了下,发现是在请求某个页面的时候会返回412错误. 而这个页面的请求是通过jquery 的 $("# ...
input的onchange事件实际触发条件与解决方法
input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...
CSS——高度塌陷以及解决方法
文章目录前言一.什么是高度塌陷? 二.高度塌陷的解决方法 1.解决方法 2.开启BFC 3.开启BFC的特点总结前言本文主要介绍了高度塌陷产生的原因以及解决方法一.什么是高度塌陷? 高度塌 ...
动易2005、2006版常见错误号的原因分析及解决方法
错误号:432 错误描述:File name or class name not found during Automation operation 错误来源:PE_Common6 原因分析:服务 ...
死锁的产生和解决方法
1.出错提示:System.Web.HttpUnhandledException (0x80004005): 引发类型为"System.Web.HttpUnhandledException& ...
css外边距溢出处理方法,CSS高度坍塌和外边距溢出问题及解决方法
高度坍塌成因父元素div未设置高度子元素全部设置浮动(float: left | right;),浮动元素脱离文档流且不占页面空间由于父元素为设置高度,高度靠内部子元素撑开,而今子元素全部脱离文 ...
css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
高度塌陷问题及解决方法
高度塌陷问题产生的原因小提示:最优解在文章底部,嫌啰嗦的可以直接跳到底部. 想要了解产生高度塌陷问题的原因,先提及几个知识点: 1.在文档流中,父元素的高度默认是被子元素撑开的. 2.当子元素设置浮 ...
html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...