html语句嵌套时出现塌陷是前端开发中非常常见的问题，通常表现为父元素无法正确包裹浮动子元素、或者子元素的外边距传递到父元素上，导致整体布局错乱，需要结合css属性来针对性解决。
html嵌套塌陷的常见原因
最常见的塌陷场景有两种，第一种是父元素内部包含浮动子元素，父元素没有设置高度时，会出现高度塌陷，无法包裹子元素。第二种是父子元素垂直方向的外边距相遇，子元素的外边距会传递给父元素，导致父元素位置异常。
浮动导致的父元素高度塌陷
当子元素设置float:left或者float:right后，子元素会脱离标准文档流，父元素如果没有触发BFC或者清除浮动，就无法检测到子元素的高度，从而出现高度塌陷。
外边距传递导致的塌陷
如果父元素没有设置边框、内边距，也没有创建BFC，那么子元素的margin-top会直接作用在父元素上，导致父元素整体下移，看起来像是嵌套出现了塌陷。
css防塌陷的常用方法
清除浮动解决高度塌陷
针对浮动子元素导致的父元素高度塌陷，最常用的方式是给父元素添加清除浮动的样式，以下是两种常见的清除浮动代码实现：
第一种是给父元素添加overflow属性触发BFC：
/* 父元素样式 */
.parent {
overflow: hidden; /* 触发BFC，包裹浮动子元素 */
width: 100%;
background-color: #f5f5f5;
}
/* 子元素浮动样式 */
.child {
float: left;
width: 200px;
height: 100px;
background-color: #409eff;
}
第二种是使用伪元素清除浮动，这种方式不会影响父元素的其他布局属性：
/* 父元素样式 */
.parent {
width: 100%;
background-color: #f5f5f5;
}
/* 伪元素清除浮动 */
.parent::after {
content: "";
display: block;
clear: both;
}
/* 子元素浮动样式 */
.child {
float: left;
width: 200px;
height: 100px;
background-color: #409eff;
}
解决外边距传递导致的塌陷
针对父子元素外边距传递的问题，可以给父元素添加内边距或者边框，也可以触发父元素的BFC来阻止外边距传递：
/* 方案一：给父元素添加内边距 */
.parent {
padding-top: 1px; /* 很小的内边距即可阻止外边距传递 */
width: 100%;
background-color: #f5f5f5;
}
/* 方案二：给父元素添加边框 */
.parent {
border-top: 1px solid transparent; /* 透明边框不影响视觉效果 */
width: 100%;
background-color: #f5f5f5;
}
/* 方案三：触发父元素BFC */
.parent {
overflow: hidden; /* 触发BFC */
width: 100%;
background-color: #f5f5f5;
}
/* 子元素样式 */
.child {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: #409eff;
}
css与html嵌套配合的实用技巧
优先使用flex布局减少塌陷问题
flex布局是css3推出的弹性布局模型，子元素设置浮动后父元素也不会出现高度塌陷，同时能更灵活的控制子元素的排列，推荐优先使用flex布局处理嵌套场景：
/* 父元素设置为flex容器 */
.parent {
display: flex;
flex-wrap: wrap; /* 子元素超出换行 */
width: 100%;
background-color: #f5f5f5;
padding: 10px;
}
/* 子元素样式 */
.child {
width: 200px;
height: 100px;
margin: 10px;
background-color: #409eff;
}
合理控制嵌套层级避免布局混乱
html嵌套层级尽量不要超过4层，过深的嵌套不仅会增加代码维护难度，还更容易出现各类布局塌陷问题。同时嵌套时注意标签的语义化，块级元素嵌套行内元素要符合html规范，不要随意嵌套不符合规则的标签。
统一设置盒模型减少尺寸计算误差
给所有元素设置box-sizing: border-box，可以让元素的宽度和高度包含内边距和边框，避免嵌套时因为内边距和边框导致父元素宽度不够，子元素换行或者溢出，间接引发布局异常：
/* 全局设置盒模型 */
* {
box-sizing: border-box;
}
/* 父元素样式 */
.parent {
width: 600px;
padding: 20px;
background-color: #f5f5f5;
}
/* 子元素样式，宽度加上父元素padding也不会溢出 */
.child {
width: 100%;
height: 100px;
background-color: #409eff;
}
注意：使用
box-sizing: border-box后，设置元素的width和height时会自动把padding和border算入其中，不需要再手动计算减去这部分尺寸，能减少很多嵌套时的尺寸误差问题。
常见问题解答
为什么给父元素设置height后还是会出现塌陷？
如果父元素设置了固定高度，但是子元素的高度加上外边距超过了父元素的高度，还是会出现内容溢出的情况，这时候可以结合overflow属性处理溢出内容，或者调整子元素的尺寸和外边距。
flex布局下还会出现嵌套塌陷吗？
flex布局下子元素默认不会脱离文档流，所以不会出现浮动导致的父元素高度塌陷问题，但是如果子元素设置了绝对定位，还是可能出现父元素无法包裹子元素的情况，这时候需要给父元素设置相对定位，或者调整子元素的定位方式。