CSS属性float导致父级div无法继承高度？

Question

我有一个在div里设置了float:right的元素，但是它让最外层的div无法环绕。这是它的jsfiddle。

我试图让提交按钮在div内向右浮动，但是设置这个属性似乎导致了问题。如何让父元素包裹浮动元素？

- Zeeno

Answer 1

将容器设置为overflow: hidden，它会自动换行！

- Steve Adams

Answer 2

我弄清楚了。父级 div 应该有 overflow: hidden;，这将使它包含其中的任何浮动元素。

- Zeeno

Answer 3

在父元素上设置“overflow: hidden;”。这将导致它包含其中的任何浮动元素。

- Sparky

Answer 4

<div class="element">
          <label></label>
          <input type="submit" id="submit" value="Post Assessment">
          <div style="clear:both"></div>
</div>

- Arun Krishnan

Answer 5

在浮动的 div 后面添加 <br style="clear: both;" />。

- Niet the Dark Absol

---

我会使用<div>而不是<br>。 - Moe Sweet

同意- Safari 不会正确处理 <br style="clear:both;" />，如果要跨浏览器使用，必须使用 div。 - Sam Dufel

Answer 6

MDN在这个案例中说：

Note: If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element's display property to flow-root.

#container {
  display: flow-root;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

在overflow方法中，他们说了以下内容：

使用overflow来创建一个新的BFC的问题在于，overflow属性是用来告诉浏览器如何处理溢出内容的。有些情况下，当你仅仅使用这个属性来创建一个BFC时，可能会出现不需要的滚动条或被裁剪的阴影。此外，对于未来的开发人员来说，这样做可能不太容易理解，因为可能不明显为什么要使用overflow来达到这个目的。如果你这样做了，最好在代码中加上注释来解释。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts

所以我更喜欢使用diplay: flow-root方法。

- Kamillekaz

Answer 7

使用

text-align:right

使用“float: right”代替

- Exor