停止在 CSS 中使用浮动 - 以下是您的替代方案

本文最初发表于我的个人博客

在我多年的 CSS 工作经验中，导致布局混乱最严重的属性是float。每当float使用 时，布局和设计中总会在某个时刻出现意外行为。我也见过一些初学者遇到类似的问题。他们使用 float ，但当问题出现时，却发现很难将其与浮动元素联系起来。

因此，我提供了一些选项，让您能够实现所需的相同效果，float同时避免混乱。这些选项针对block元素，至于inline元素，我假设您知道可以使用text-align它们。

利润

你可能margin: 0 auto;经常使用 来水平居中块元素。你也可以使用margin来将块元素左对齐或右对齐。如果需要左对齐，请设置margin-right: auto和margin-left: 0;。如果需要右对齐，请设置margin-left: auto和margin-right: 0;。简单来说，要将块元素水平对齐到一侧，请将该侧的边距设置为 0，将另一侧的边距设置为 auto。

需要注意的是，块的宽度应小于100%。因此，它应该具有固定的宽度值或fit-content。

可以看出，这种方法无法真正将两个元素对齐到同一层级。您应该尝试下面介绍的其他方法。

与 Flex 对齐

使用 flex，您可以更灵活地对齐元素。具体来说，要将元素水平向左或向右对齐，首先，您需要将其添加display: flex;到父元素。然后，根据flex-direction您将使用的布局，您有两个选项可供选择。如果您使用flex-direction: row;flex，则设置justify-content: flex-end;为将元素对齐到父元素的末尾或justify-content: flex-start;将元素对齐到父元素的开头。这也允许您对从右到左和从左到右的布局应用类似的样式，因为flex-end从左到右布局将元素向右对齐，从右到左flex-start布局将元素向左对齐，而从右到左布局则相反。

要将元素与同一级别的另一个元素对齐，可以像上面解释的那样使用 flex 和 margin 的组合：

与网格对齐

现在，根据你的使用情况，这个方法可能会更复杂，但你也可以使用网格来对齐块。你需要做的是将父元素的显示设置为grid，然后，如果你只想让网格中的一个块向右对齐，你可以设置grid-auto-columns: calc(100% - BLOCK_WIDTH);它是否已经设置了块宽度。如果没有设置，则无需设置。然后，grid-area: right;在你想要对齐的块上设置 ，它就会向右对齐。

当然，您可以使用网格做更多的事情，并且可以将它们用于具有不同类型对齐方式的许多块，这只是将网格中的元素向右对齐的一个简单情况。

要将两个块对齐在同一水平面上，您可以使用grid-template-areas指定网格的模板和每个区域的名称，然后为块分配它们应该所在的区域

结论

根据您的布局，在对齐元素时，可能还有其他选项可供选择。无论选择哪种选项，都请停止使用浮动。