CSS 如何让浮动的DIV在固定宽度的DIV内继续水平排列

在本文中，我们将介绍如何使用CSS将浮动的DIV元素在一个固定宽度的父容器内水平排列。

阅读更多：CSS 教程

什么是浮动和固定宽度的DIV？

在介绍如何让浮动的DIV水平排列之前，我们先来了解什么是浮动和固定宽度的DIV。

浮动（float）是CSS中一种布局方式，它将元素从正常的文档流中脱离出来，并使得元素可以悬浮在其他元素的左侧或右侧。

固定宽度的DIV是指一个具有固定宽度的块级元素，它的宽度是预先定义好的，并且不会根据内容的变化而自动调整。

如何让浮动的DIV在固定宽度的DIV内水平排列？

要让浮动的DIV在固定宽度的DIV内水平排列，我们可以使用CSS的clear属性来控制浮动的DIV的位置。

示例代码如下：

<div class="container">
  <div class="float-item">1</div>
  <div class="float-item">2</div>
  <div class="float-item">3</div>
  <div class="float-item">4</div>
  <div class="clearfix"></div>
</div>

.container {
  width: 400px;
  border: 1px solid black;
  padding: 10px;
}

.float-item {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin-right: 10px;
}

.clearfix {
  clear: both;
}

在上面的示例中，我们创建了一个固定宽度为400px的父容器，并在其中包含了4个浮动的DIV（float-item）。为了保证这些浮动的DIV能够水平排列，我们在浮动的DIV之后添加了一个clearfix的空DIV，并给它设置了clear:both属性。

这样，浮动的DIV就会在父容器内水平排列，并且不会超出父容器的边界。

其他解决方案

除了使用clearfix来清除浮动以外，还有其他一些解决方案可以让浮动的DIV在固定宽度的DIV内水平排列。

一种解决方案是使用Flexbox布局。Flexbox是CSS3中引入的一种弹性布局，可以方便地实现各种排列方式，包括水平排列。

示例代码如下：

<div class="container">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
  </div>
</div>

.container {
  width: 400px;
  border: 1px solid black;
  padding: 10px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

在上面的示例中，我们使用Flexbox布局来实现浮动的DIV的水平排列。通过设置父容器为flex，并使用justify-content: space-between属性，浮动的DIV将会自动水平排列，并且在父容器内均匀分布。

另一种解决方案是使用CSS Grid布局。CSS Grid布局是一种二维布局方式，可以通过将父容器设为grid，并设置网格的列数和行数，来实现浮动的DIV的水平排列。

示例代码如下：

<div class="container">
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>
</div>

.container {
  width: 400px;
  border: 1px solid black;
  padding: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-item {
  height: 100px;
  border: 1px solid black;
}

在上面的示例中，我们使用CSS Grid布局来实现浮动的DIV的水平排列。通过设置父容器为grid，并使用grid-template-columns属性来定义网格的列数和每一列的宽度，浮动的DIV将会自动水平排列，并且在父容器内均匀分布。