6、浮动元素用于布局

浮动元素用于布局

1. 浮动元素的基础

CSS中的浮动（float）属性是一个非常重要的概念，它允许我们创建复杂的网页布局。浮动元素通常用于让文本环绕图片，或者让多个块级元素并排显示。浮动元素从正常的文档流中移出，但仍然会影响周围的元素。理解浮动的工作原理对于创建响应式的、美观的网页布局至关重要。

1.1 文本环绕图片

浮动属性可以让文本环绕图片。例如，将一个图片浮动到左侧，可以使后续的文本自动绕过图片的右侧。同样，将图片浮动到右侧，文本会绕过图片的左侧。这使得页面布局更加灵活和美观。

示例代码

<img src="example.jpg" alt="Example Image" style="float: left;">
<p>这是一段环绕图片的文本。它会自动绕过图片的右侧。</p>

1.2 浮动元素的行为

浮动元素的行为取决于它在HTML中的位置和其他元素的属性。浮动元素会尽可能地向左或向右移动，直到遇到父元素的边界或其他浮动元素。后续的内容会上移到浮动元素旁边的空间中，除非使用 clear 属性阻止这种行为。

2. 防止其他元素沿着浮动元素移动

有时，我们不希望某些元素随着浮动元素移动。例如，在一个浮动的图片后面，我们可能不希望标题也环绕图片。为此，我们可以使用 clear 属性来强制元素移动到浮动元素的下方。

2.1 clear </