css浮动总结

CSS 的 float 属性用于创建浮动元素，可以让元素向左或向右浮动，并且可以与其他文本或元素的浮动元素形成环境，进行“文字环绕”的效果。

float 属性的可能值：

• none：元素不浮动（默认值）。
• left：元素向左浮动。
• right：元素向右浮动。

使用 float 需要注意以下几点：

1. 浮动元素后的元素会尝试填补浮动元素的空间，导致的现象是文本环绕。
2. 如果父元素的高度不足以包含所有浮动的子元素，则父元素的高度可能不会被撑开。
3. 浮动元素之后的元素可能会被浮动元素“遮挡”，需要使用清除浮动来解决这个问题。

解决浮动引起的父元素高度塌陷的方法：

• 使用 overflow 属性设置为 auto 或 hidden（如果你确定内容不会被裁剪）。
• 在父元素的最后添加一个“清除浮动”的元素，并为其设置 clear 属性为 both。
• 使用伪元素进行清除浮动，这是一种更为现代的方法。

例子：

/* 方法1：使用overflow */
.parent {
  overflow: auto; /* 或者使用 hidden */
}
 
/* 方法2：添加一个清除浮动的元素 */
.clearfix {
  clear: both;
}
 
/* 方法3：使用伪元素清除浮动 */
.parent::after {
  content: "";
  display: table;
  clear: both;
}

在 HTML 中使用：

<!-- 方法1 或 方法2 -->
<div class="parent">
  <div class="child" style="float: left;">左浮动</div>
  <div class="child" style="float: right;">右浮动</div>
  <div class="clearfix"></div> <!-- 清除浮动 -->
</div>
 
<!-- 方法3 -->
<div class="parent">
  <div class="child" style="float: left;">左浮动</div>
  <div class="child" style="float: right;">右浮动</div>
  <!-- 伪元素自动清除浮动 -->
</div>

以上三种方法都可以解决由于浮动元素引起的父元素高度塌陷问题。在实际开发中，可以根据具体情况选择最适合的方法。