CSS 布局之浮动与清除

浮动布局（float layout）是一种常用的 CSS 布局技术，它可以使元素在一行内浮动，并且可以自动适应容器的宽度。浮动布局的原理是通过设置元素的浮动属性（float），让元素脱离文档流并且向左或向右浮动。浮动元素会尽量排列在一行内，如果容器宽度不够，浮动元素会自动换行排列。

浮动布局的用法主要有两种场景：

1. 创建多列布局：通过将多个元素都设置为浮动，可以在一行内创建多列布局。
2. 图片排列：浮动布局常用于图片排列，可以让图片自动适应容器宽度并且实现流动的效果。

然而，浮动布局也会导致一些布局问题，如父元素高度塌陷、浮动元素覆盖等。为了解决这些问题，可以使用清除浮动（clear float）的技术。

清除浮动的方法有多种，常用的方法包括：

1. 添加额外的空元素并设置 clear 属性：在浮动元素后面添加一个空的块级元素（如 div）并设置 clear 属性为 both。

<div style="clear: both;"></div>

1. 使用伪元素清除浮动：给浮动元素的父元素添加一个伪元素并设置 clear 属性为 both。

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

1. 使用 clearfix 类：为浮动元素的父元素添加 clearfix 类，然后通过 CSS 来清除浮动。

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

以上方法可以避免浮动元素对其他元素造成的影响，使布局更加稳定和可靠。