CSS - 浮动参数问题仅将部分堆叠在彼此之上

Question

Having an issue with the float parameter so made a simple code snippet to show the problem (sure it's something simple but can't pinpoint it). float 参数有问题所以制作了一个简单的代码片段来显示问题（确保它很简单但不能查明）。

As I understand the float declaration it should:据我了解浮动声明它应该：

move the first section up and to the left or right将第一部分向上和向左或向右移动
the next section should move up and to the left or right next to the first section as long as there is still enough width space只要仍有足够的宽度空间，下一部分应该向上移动到第一部分旁边的左侧或右侧
Above should continue until width space is not available and a new row has to be made上面应该继续，直到宽度空间不可用并且必须创建新行

However, the sections are only stacking one on top of the other and to the side designated in the declaration.但是，这些部分仅将一个堆叠在另一个顶部，并堆叠到声明中指定的一侧。 Can't get them to move next to one another.无法让它们彼此并排移动。

 header, footer { text-align: center; height: 30px; width: 100%; border: 1px solid black; clear: both; } section { text-align: center; height: 30px; width: 20%; float: left; border: 1px solid black; clear: both; }

 <header>Header</header> <section>Section 1</section> <section>Section 2</section> <section>Section 3</section> <footer>Footer</footer>

Answer 1

Using clear: both on your sections is forcing them to go on new lines instead of stacking next to each other.在您的部分中使用clear: both会迫使它们在新行上变为 go 而不是彼此堆叠。

If you remove that and only apply clear: both to your footer, it should work correctly.如果你删除它并且只应用clear: both到你的页脚，它应该可以正常工作。

Answer 2

The problem is the "clear" rule you can proceed in two ways:问题是您可以通过两种方式进行的“明确”规则：

Solution 1:解决方案 1：

If you want to use the "clear" style rule this will have to be applied to a parent containing ( div in the example) section with "float":如果您想使用“清晰”样式规则，则必须将此规则应用于包含（示例中的div ）带有“float”的部分的父级：

html html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
</head>
<body>
    <header></header>
    <div id="parent">
        <section></section>
        <section></section>
        <section></section>
    </div>
    <footer></footer>
</body>

</html>

css header, footer { height: 100px; css header，页脚 { 高度：100 像素； width: 100%;宽度：100%； border: 1px solid black;边框：1px 纯黑色； clear: both;明确：两者； } }

    #parent {
        clear: both; /* add this here and remove clear:both from section */
    }

    section {
        height: 300px;
        width: 20%;
        float: left;
        border: 1px solid black;
    }

in this way the row containing the section tags will be aligned and everything that comes after will not be moved based on the positions given by the "float".这样，包含部分标签的行将对齐，并且不会根据“浮动”给出的位置移动后面的所有内容。 The clear property is used to prevent other floated elements from appearing alongside an element. clear 属性用于防止其他浮动元素出现在元素旁边。 It applies only to block elements and is not inherited.它只适用于块元素，不被继承。

Solution 2方案二

Only remove the clear:both from section in the css仅从 css 部分中删除clear:both

CSS - 浮动参数问题仅将部分堆叠在彼此之上

问题描述

2 个解决方案

解决方案1
0 2022-04-22 15:03:54

解决方案2
0 已采纳 2022-04-22 15:05:42

CSS - 浮动参数问题仅将部分堆叠在彼此之上

问题描述

2 个解决方案

解决方案1 0 2022-04-22 15:03:54

解决方案2 0 已采纳 2022-04-22 15:05:42

解决方案1
0 2022-04-22 15:03:54

解决方案2
0 已采纳 2022-04-22 15:05:42