CSS中浮动和高度坍塌

CSS关浮动和高度坍塌

1. 浮动（Float）

描述：浮动是一种布局方式，用于使元素在容器中脱离正常的文档流，使其能够向左或向右漂浮。
值：left（向左浮动）, right（向右浮动）

1.1 浮动的作用

浮动元素不占据文档流中的位置，文本和其他元素会环绕浮动元素。
用于实现多列布局，例如多列文本或图片布局。
可以用于实现响应式布局，让元素在不同屏幕大小下自动调整位置。

1.2 浮动的注意事项

浮动元素脱离了文档流，可能会导致父元素的高度坍塌，需要注意清除浮动。
浮动元素会覆盖非浮动元素，需要注意z-index属性来控制元素的层级。
浮动元素的宽度默认为其内容的宽度，需要设置宽度属性来调整元素的宽度。

1.3 浮动的解决方案

使用clear属性来清除浮动，使父元素能够正确计算高度。

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

<div class="clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>

使用伪元素::after来清除浮动，避免增加多余的空标签。

.float-left {
  float: left;
}

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

<div class="clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>

2. 高度坍塌（Height Collapse）

描述：高度坍塌指父元素的高度没有被子元素撑开，导致父元素的高度为0。

原因：父元素的高度默认由子元素的高度撑开，当子元素浮动或绝对定位时，不会撑开父元素。

2.1 高度坍塌的解决方案

使用浮动解决高度坍塌。

.container {
  float: left;
}

使用绝对定位解决高度坍塌。

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

使用BFC（块级格式化上下文）解决高度坍塌。

.container {
  overflow: hidden; /* 或其他属性，例如overflow: auto; */
}

以上是CSS中有关浮动和高度坍塌的知识点和解决方案。通过理解浮动的作用、注意事项以及解决高度坍塌的方案，可以更好地控制页面布局，避免出现不必要的问题