浮动（float）

CSS中的浮动（float）属性用于将一个元素从文档的正常流中取出，并将其放置在其包含元素的左侧或右侧。浮动元素会与后续的内容并排显示，直到该行被填满为止。通常用于布局设计，如将图像与文本环绕显示，或者创建多列布局。

💡 浮动会让元素脱离正常文档流，这个浮动了的标签就不占位置了。

💡 浮动只会影响他后面的元素，不影响前面的元素。 如果要不影响后面元素的布局就需要清除浮动。

浮动的基本使用方法

1. 将元素浮动到左侧或右侧

/* 将元素浮动到左侧 */
.element {
    float: left;
}

/* 将元素浮动到右侧 */
.element {
    float: right;
}

2. 清除浮动

浮动元素会影响后续元素的布局，因此常常需要清除浮动。清除浮动可以使用clear属性，或者更常见的是使用一种名为“clearfix”的技术。

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

示例

假设我们有一个包含图像和文本的布局，希望图像浮动在文本的左侧：

<div class="clearfix">
    <img src="image.jpg" class="float-left" alt="示例图片">
    <p>这是一些示例文本，图像会浮动在文本的左侧。</p>
</div>

对应的CSS：

.float-left {
    float: left;
    margin-right: 10px; /* 为了使文本与图像之间有一些间距 */
}

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

注意事项

1. 父元素高度塌陷: 当子元素都浮动时，父元素的高度会塌陷，可以通过给父元素添加clearfix类来解决。
2. 溢出问题：浮动元素可能会导致溢出，特别是在响应式设计中。确保在设计时考虑到不同屏幕尺寸下的表现。
3. 与Flexbox和Grid的关系：虽然浮动技术在过去非常流行，但现代布局更推荐使用Flexbox和Grid布局，它们提供了更强大和灵活的布局能力。

结论

尽管浮动在现代Web开发中并不再是首选的布局方式，但它仍然是一个重要的工具，特别是在处理简单的文本和图像混排时。了解浮动及其使用场景，对于前端开发者来说依然是非常有价值的。