css - 属性浮动使父元素忽略其高度

Question

我认为现场看到效果比在这里发布代码更好。所以你可以在这里找到它：jsfiddle

如您所见，添加按钮位于边框上。如果没有为按钮设置浮动，一切都将是完美的。一旦我设置了浮动（无论是向左还是向右），盒子就不会像它应该的那样扩展。

知道如何解决这个问题吗？谢谢你。

Answer 1

添加overflow: hidden到父元素 - http://jsfiddle.net/9GGTr/5/

Answer 2

您只需要使用 clearfix 或“clear:both”css 样式清除浮动：

http://jsfiddle.net/BumbleB2na/9GGTr/6/

这会将浮动元素放回页面的“常规流程”中，允许其容器尊重浮动元素的宽度和高度。