CSS3浮动定位float理解及浮动高度坍塌的解决方法

浮动定位float是CSS中的一个属性，用于创建浮动框，实现文本环绕效果。浮动框可以是左浮动(float: left;)或右浮动(float: right;)。当元素浮动之后，会脱离正常的文档流，从而导致父元素的高度塌陷（也称为浮动高度坍塌问题）。

解决浮动高度坍塌的方法有很多种，以下是几种常用的解决方法：

1. 使用clearfix技术：在父元素的末尾添加一个:after伪元素，并设置clear: both;。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. 使用overflow: auto;或overflow: hidden;：在父元素中设置这个属性可以清除内部浮动造成的影响。

.parent {
  overflow: auto;
}

3. 使用display: flex;：在父元素中使用Flexbox布局可以避免浮动高度坍塌问题。

.parent {
  display: flex;
}

4. 使用display: inline-block;：在子元素中使用这个属性可以避免浮动造成的高度坍塌问题。

.child {
  display: inline-block;
}

5. 使用<br style="clear: both;">：在父元素的末尾添加这个标签，可以清除内部浮动造成的影响。

<div class="parent">
  <!-- 浮动元素 -->
  <br style="clear: both;">
</div>

选择哪种方法取决于具体情况，如果需要兼容更多的浏览器或者使用Flexbox等现代布局技术不是选择，则可能需要考虑使用clearfix技术或者overflow属性。