CSS

Question

float 参数有问题，所以制作了一个简单的代码片段来显示问题（确定它很简单，但不能查明）。

据我了解浮动声明应该：

将第一个部分向上和向左或向右移动
只要还有足够的宽度，下一节就应该在第一节旁边向上和向左或向右移动space
上面应该继续，直到宽度 space 不可用并且必须创建新行

但是，这些部分只是一个堆叠在另一个上面，并在声明中指定的一侧。无法让它们并排移动。

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

在您的部分中使用 clear: both 会迫使它们换行而不是彼此相邻堆叠。

如果您删除它并仅将 clear: both 应用到您的页脚，它应该可以正常工作。

Answer 2

问题在于“明确”规则，您可以通过两种方式进行：

解决方案一：

如果您想使用“清晰”样式规则，则必须将此规则应用于 parent 包含（示例中的 div）带有“浮动”的部分：

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, 页脚{ 高度：100px；宽度：100%；边框：1px 纯黑色；明确：两者； }

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

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

这样，包含部分标签的行将对齐，并且不会根据“浮动”给定的位置移动后面的所有内容。清除属性用于防止其他浮动元素出现在元素旁边。它只适用于块元素，不被继承。

解决方案 2

仅从 css

中的部分删除 clear:both

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

CSS - Problem with float parameter only stacking sections on top of one another

html

css-float