额外标签法
- 原理：在浮动元素的父元素内，于最后一个浮动子元素之后添加一个空的块级元素，并为其设置
clear: both样式。该空元素会强制父元素撑开高度，以包含所有浮动子元素，从而解决高度塌陷问题。 - 示例：
<div class="parent">
<div class="float-child1">浮动子元素1</div>
<div class="float-child2">浮动子元素2</div>
<div class="clear"></div>
</div>
.float-child1,.float-child2 {
float: left;
}
.clear {
clear: both;
}
- 优缺点：优点是简单直接，容易理解和实现；缺点是增加了额外的HTML标签，不符合语义化原则，且在一些复杂布局中可能会影响页面结构的简洁性和可维护性。
overflow属性法
- 原理：通过将父元素的
overflow属性设置为hidden、auto或scroll，触发父元素形成块级格式化上下文（BFC）。在BFC中，父元素会包含其内部的浮动子元素，从而自动撑开高度，解决高度塌陷问题。 - 示例：
.parent {
overflow: hidden;
}
- 优缺点：优点是代码简洁，无需添加额外的标签或复杂的CSS规则；缺点是可能会导致一些副作用，如当设置为
hidden时，超出父元素范围的内容会被裁剪，而设置为auto或scroll时会出现滚动条，可能影响页面的布局和视觉效果，需要根据具体情况谨慎使用。
clearfix类清除法
- 原理：先定义一个名为
.clearfix的类，在该类中使用伪元素清除浮动的方式来解决高度塌陷问题，然后将这个类应用到需要清除浮动的父元素上。这样可以实现代码的复用，提高开发效率。 - 示例：
.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="parent clearfix">
<div class="float-child1">浮动子元素1</div>
<div class="float-child2">浮动子元素2</div>
</div>
- 优缺点：优点是既解决了高度塌陷问题，又符合语义化和代码复用的要求，是一种较为常用和推荐的方法；缺点是需要额外定义一个CSS类，如果项目中使用了多个不同的样式表或框架，可能需要确保该类的定义不会与其他样式产生冲突。
给父元素设置固定高度
- 原理：直接为父元素指定一个固定的高度值，使其能够容纳所有的浮动子元素。这个高度值应该根据浮动子元素的实际高度之和来确定，以确保父元素能够完全包含它们。
- 示例：
.parent {
height: 200px;
}
- 优缺点：优点是简单粗暴，能够快速解决高度塌陷问题；缺点是缺乏灵活性，如果浮动子元素的高度发生变化，父元素的高度将无法自适应，可能导致布局错乱，因此只适用于子元素高度固定且已知的情况。
使父元素成为浮动元素
- 原理：将父元素也设置为浮动元素，使其能够参与到浮动布局中，从而撑开高度以包含浮动子元素。这样父元素就能够根据其内部浮动子元素的高度自动调整自身高度，解决高度塌陷问题。
- 示例：
.parent {
float: left;
}
- 优缺点：优点是能够自适应浮动子元素的高度变化，较为灵活；缺点是可能会对整体布局产生较大影响，导致父元素后面的元素也受到浮动的影响，需要对后续元素进行额外的布局调整和处理，增加了布局的复杂性。
使父元素成为绝对定位元素
- 原理：将父元素设置为绝对定位元素，并通过设置其
top、right、bottom、left等属性来确定其位置和大小范围，使其能够包含浮动子元素。在绝对定位的情况下，父元素会脱离文档流，但仍然可以根据其内部浮动子元素的高度来撑开自身高度。 - 示例：
.parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
- 优缺点：优点是可以精确控制父元素的位置和大小，同时解决高度塌陷问题；缺点是父元素脱离文档流后，会影响到页面中其他元素的布局，可能需要对整个页面的布局进行重新调整和规划，使用时需要谨慎考虑。
不同的方法适用于不同的场景和布局需求，在实际开发中，需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
