Question

我无法找到解决由after选择器具有 clear float 规则的元素引起的问题的方法，该规则违反了预期的布局。请参阅this fiddle。我决定发布SO，因为我找不到干净解决这个问题的方法。

观察上面的小提琴，预期的结果是蓝色区域高到完全包含其子节点但不更高。正如您所看到的，这不是正在发生的事情，而是蓝色区域与黄色区域的高度相匹配。我认为，其原因有两个方面：

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

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

fiddle

.sidebar

Answer 1

你可以修改块格式化上下文，这样就可以了解浮动元素。

溢出，显示，浮动和位置都可以这样做，你的代码有溢出：

.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/

修复明显的浮子破损

1 个答案: