修复清除浮动破损

Question

我无法找到一种方法来解决由 after 选择器具有 clear float 规则的元素引起的问题预期的布局。请参考this fiddle。我决定在 SO 上 post 因为我找不到解决这个问题的 clean 方法。

查看上面的 fiddle，预期的结果是蓝色区域尽可能高以完全包含其子节点，但不会更高。如您所见，实际情况并非如此，蓝色区域与黄色区域的高度相匹配。我认为，其原因有两个：

蓝色和红色区域 (.outer) 的包装器未浮动并使用边距技巧来正确对齐自身，而黄色区域（.sidebar）是向左浮动。
蓝色元素 (.toolbar) 有一个 after 选择器，其中包含一个 clear: float 规则，该规则以某种方式引用回 .sidebar 的浮点数（为什么？）。

那么，如何以干净的方式修复此问题，使蓝色区域具有预期的高度？

顺便说一句，这是我想出的 "fix"，但我很难接受它，因为它感觉很老套：fiddle。技巧包括浮动蓝色和红色元素的内包装 (.inner)。

Answer 1

您可以修改块格式上下文，以便浮动元素会被注意。

overflow、display、float 和 position 可以做到这一点，你的代码有 overflow :

.wrapper {
}
.sidebar {
  width: 200px;
  background-color: yellow;
  height: 300px;
  float: left;
}
.outer, .toolbar {
  overflow:hidden;
}
.toolbar {
  background-color: blue;
}
.group {
  float: right;
}
.content {
  height: 800px;
  background-color: red;
}

<body>
  <div class="wrapper">
    <div class="sidebar">
      sidebar
    </div>
    <div class="outer">
      <div class="inner">
        <div class="toolbar">
          <div class="group">
            <button>
              Test
            </button>
          </div>
        </div>
        <div class="content">
          <div>
            TEST
          </div>
          Lorem ipsum
        </div>
      </div>
    </div>
  </div>
</body>

查看更多信息：https://css-tricks.com/all-about-floats/

修复清除浮动破损

Fixing clear float breakage

css

css-float