CSS 浮动(float)、清除(clear)浮动元素的“行(row)”

在本文中，我们将介绍CSS中浮动(float)以及如何通过清除(clear)浮动元素来创建一个流畅的布局，以确保没有浮动元素跨行显示的问题。

阅读更多：CSS 教程

浮动(float)

CSS浮动(float)是一种布局技术，用于将元素从其正常的文档流中移动，并使它们靠近其容器的左侧或右侧。浮动元素可以通过float属性来设置，它的值可以是left、right或none。

左浮动(left float)

<div class="parent">
  <div class="child" style="float: left;">左浮动元素1</div>
  <div class="child" style="float: left;">左浮动元素2</div>
</div>

在上面的例子中，两个子元素都设置了左浮动，它们会靠左排列，并让其后续元素环绕它们。

右浮动(right float)

<div class="parent">
  <div class="child" style="float: right;">右浮动元素1</div>
  <div class="child" style="float: right;">右浮动元素2</div>
</div>

在这个例子中，两个子元素都设置了右浮动，它们会靠右排列，并让其后续元素环绕它们。

清除浮动(clear float)

浮动元素会使其容器失去高度，这可能导致布局问题。为了清除浮动并确保正确的布局，需要使用clear属性。

clear属性的取值

left：清除左浮动元素
right：清除右浮动元素
both：清除左右两侧的浮动元素
none：默认值，不清除浮动

使用空元素清除浮动

<div class="parent">
  <div class="child" style="float: left;">左浮动元素</div>
  <div class="child" style="float: left;">左浮动元素</div>
  <div style="clear: both;"></div>
</div>

在上面的例子中，通过在浮动元素之后插入一个空的div元素，并设置其样式clear: both;来清除浮动。

使用clear属性清除浮动

<div class="parent">
  <div class="child" style="float: left;">左浮动元素</div>
  <div class="child" style="float: left;">左浮动元素</div>
  <div style="clear: left;"></div>
</div>

在这个例子中，通过在容器中插入一个clear: left;的子元素来清除左浮动。

为“行”清除浮动

有时候，我们需要在多个浮动元素之后清除浮动，以避免它们跨行显示。为了实现这个目标，通常会创建一个类似于“row”的容器，并在每个“row”之后清除浮动。

<div class="row">
  <div class="child" style="float: left;">浮动元素1</div>
  <div class="child" style="float: left;">浮动元素2</div>
  <div class="child" style="float: left;">浮动元素3</div>
</div>
<div style="clear: both;"></div>

在这个例子中，我们使用一个class为“row”的容器包含了三个浮动元素，并在其之后插入了一个空的div元素来清除浮动。这样，我们可以确保每一行的浮动元素都能够按照预期进行布局。