CSS Float Left

什么是 CSS Float?

在 CSS（层叠样式表）中，float 属性控制着一个元素在其包含元素中的位置，以及周围元素如何围绕它流动。浮动的元素会从正常的文档流中提取出来，并向左或向右移动，直到它接触到另一个浮动元素或其包含框的边框。

CSS float 属性是一种定位属性。它将元素推到左侧或右侧，允许其他元素环绕它。它通常与图像和布局一起使用。

float 属性的主要功能是允许内容在布局中围绕图像或块级元素流动，通过允许文本和其他元素环绕浮动的元素。

让我们通过查看其打印显示来理解它的目的和起源。在打印显示中，图像被插入页面，文本根据需要环绕它。

它的网页布局也与打印布局非常相似。

虽然 float 属性曾经用于布局，但现在使用其他方法（如 CSS 布局技术中的 flexbox 或 grid）可以实现更可靠、更灵活的设计。然而，float 属性仍然在某些情况下使用，尤其是在处理旧布局或旧代码时。

语法

CSS 中 float 属性的语法如下：

什么是 CSS Float Left?

在 CSS 中，使用名为 float: left; 的属性-值对，可以将元素在其包含元素内部向左浮动。向左浮动的元素会脱离文档的正常流，并向左移动，直到它接触到另一个浮动的元素或其包含框的边缘。

让我们看看 CSS float left 是如何工作的

1. 对齐

元素被定位在其包含元素的左侧。

2. 内容流

浮动元素的右侧将被后续内容环绕。因此，文本和其他元素将出现在左浮动元素的旁边，从而产生环绕效果。

3. 宽度调整

默认情况下，左浮动元素会尝试占据尽可能多的水平空间，但如果您想管理其大小，可以使用 width 属性设置宽度。

语法

float: left; 属性的语法如下：

为什么我们使用 CSS Float Left?

我们使用 CSS float left 有一些原因。一些常见原因如下：

1. 文本环绕

当元素向左浮动时，文本和其他内联元素将环绕该元素的右侧。这在设计多列布局，内容围绕块级元素或图像流动时特别有用。

2. 创建列

创建具有列的布局的经典方法是使用 float: left。通过将多个元素向左浮动，您可以创建类似网格的结构，其中每个元素占据一定的水平空间。

3. 旧版支持

在引入 Flexbox 和 Grid 等增强型布局系统之前，float 是最早使用的布局技术之一。在旧代码或需要支持旧浏览器的情况下，仍然可以使用 float: left;。

4. 陪伴

在与使用基于 float 的布局的现有代码一起工作或与第三方库或框架集成时，您有时可能需要为了保持一致性而坚持使用 float: left;。

重要的是要记住，尽管 float: left; 在过去被广泛使用，但它存在一些缺点和问题，包括需要清除浮动技术以及浮动清除问题。Flexbox 和 Grid 是两个现代 CSS 布局系统，它们提供了更大的布局灵活性、简单性和控制力。

示例 1

输出

示例 2

输出