一套完整代码解析 高度坍塌的解决方案（最全）
目录
一：方案总结
二：代码解析
原因引入
代码块 可直接使用调试（带解析）
图示：
一：方案总结
/* 方案1：父元素自设高度 */
/* height: 100px; */
/* 方案2：父元素触发BFC结界 */
/* overflow: hidden; */
<!-- 方案3：找一个空的div专门干清除浮动的事情 -->
<!-- <div></div> -->
/* 方案4：让最后一个子元素来清除浮动影响 */
/* 我后悔了，我不浮动了，我来清除哥哥们浮动对父亲产生的影响 */
/* 清除左右两个方向子元素浮动对父元素产生的影响 */
/* clear: both; */
/* 方案5：让父级也浮动，成为和子级同一层的元素 */
/* float: left; */
/*方案6 使用after伪元素结合clear属性解决高度塌陷*/
.fu::after{
content:"";/*在浮动元素的父元素内容区最后加上内容*/
display:block;/*默认情况下after所添加的内容为行内元素*/
clear:both;/*清除浮动元素影响*/
}
二：代码解析
原因引入
进行页面布局时，为了能够达到自适应，通常高度是不会进行固定设置的，而使用float进行元素的浮动后，由于没有内容的高度，所以会发生父元素的高度塌陷问题，为了解决此类问题这里给出了几种解决方法。
代码块 可直接使用调试（带解析）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父级高度坍塌问题解决</title>
<style type="text/css">
/* 1.给父元素设置边框 */
.fu {
border: 5px solid #000;
/* 方案1：父元素自设高度 */
/* height: 100px; */
/* 方案2：父元素触发BFC结界 */
/* overflow: hidden; */
/* 方案5：让父级也浮动，成为和子级同一层的元素 */
/* float: left; */
}
/* 2.给父级下的所有div设置大小 */
.fu > div {
width: 100px;
height: 100px;
}
/* 3.给5个儿子元素设置不同的背景色 */
.z1 {
background-color: rgba(255,0,0,1);
float: left;
}
.z2 {
background-color: orange;
float: left;
}
.z3 {
background-color: yellow;
float: right;
}
.z4 {
background-color: green;
float: left;
}
.z5 {
background-color: cyan;
float: left;
/* 方案4：让最后一个子元素来清除浮动影响 */
/* 我后悔了，我不浮动了，我来清除哥哥们浮动对父亲产生的影响 */
/* 清除左右两个方向子元素浮动对父元素产生的影响 */
/* clear: both; */
}
/* 给父元素最后生成一个空白子元素，变块级，清除浮动影响 */
.clearfix::after {
content: ''; /* 在父级最后生成一个空白的新的子元素 */
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="fu clearfix">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div class="z4"></div>
<div class="z5"></div>
<!-- 方案3：找一个空的div专门干清除浮动的事情 -->
<!-- <div></div> -->
</div>
</body>
</html>
图示：
解决前
解决后
总结
以上是生活随笔为你收集整理的一套完整代码解析 高度坍塌的解决方案（最全）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 云骑士u盘装win8系统教程
- 下一篇： 5G应用大幕开启，四大领域迎全面机遇