Question

为什么父div元素在其子项浮动时停止调整高度？我有以下HTML代码片段

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
  <div id="container">
    <div id="overflown_container">
      <button class="button">Button</button>
      <button class="button" style="height:80px; float: right">Overflown button</button>
    </div>
  </div>
</body>
</html>

和CSS

#container {
  background-color: blue;
  width: 60vw;
  margin: auto;
}

#overflown_container {
  background-color: red;
  margin-bottom: 10px;
}

.button {
  float: bottom;
  height: 44px;
  padding: 10px;
  border: 5px solid yellow;
  margin: 0 0 10px 0;
}

现在结果如下：

如果我将overflow: auto属性添加到overflown_container，它将调整它的高度，但是我必须将overflow属性添加到所有包含元素，直到根目录不需要。另外，我想将两个按钮对齐到底部，但似乎不可能将Button1浮动到溢出区域。

为什么浮动按钮会导致溢出？如何避免它，并实现设计，其中两个按钮位于容器的两端，可能有也可能没有固定尺寸，在公共基线（底部）对齐，容器增大尺寸而不会溢出？

Answer 1

浮动元素默认情况下不会被其容器正确包含。</ p>

要使容器适应浮动元素的宽度和高度，需要为其添加clearfix属性

关注http://nicolasgallagher.com/micro-clearfix-hack/

将此添加到您的css

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

并将clearfix类添加到浮动元素的包装器

另一件事是，没有浮动：在CSS中的底部，只是向左或向右浮动。让它“漂浮”在底部，要么为浮动元素添加足够的margin-top，要么不使用float，使用position：absolute而不是

    .parent{
        position: relative;
    }
    .child {
        position: absolute;
        bottom: 0;
    }

Answer 2

浮动元素的问题在于它们将元素置于文档的正常流程之外。 Clearfix是一个很有用的解决方案，我在这里实现了它，但它没有实现你想要的东西：https://jsfiddle.net/07sjLaLa/

正如您在以下示例中所看到的，从按钮中删除float: right会根据要求对齐底部的按钮：https://jsfiddle.net/07sjLaLa/1/

但是，现在您已经遇到了按钮未按照您希望的那样对齐的问题。在没有float的情况下完成正确对齐的最简单方法是对父元素应用正确的对齐，但显然你不能用混合对齐对象做到这一点，所以我们只需要添加一组新的父元素：{{ 3}}

请注意，在所有这些示例中，包装元素#container不会展开，但这可以通过在此元素上包含clearfix来解决。 https://jsfiddle.net/07sjLaLa/2/

CSS：当孩子浮动时为什么容器溢出

2 个答案: