如何防止超出父母的界限？

Question

我在divs中有数据：

-------------------------------------
| ----------   ------------------   |
| | Pane L |   |   D A T A      |   |
| |        |   |                |   |
| |        |   |                |   |
| |        |   |                |   |
| ----------   |                |   |
|              -----------------|   |
-------------------------------------

父母是根据“数据”面板的大小确定的。

如果Pane L太长（长于数据），那么它超出了其父级的边界，并且不会拉动父级边界......

-------------------------------------
| ----------   ------------------   |
| | Pane L |   |   D A T A      |   |
| |        |   |                |   |
| |        |   |                |   |
| |        |   |                |   |
| |        |   -----------------|   |
--|        |-------------------------
  |        |
  ----------

“Pane L”的CSS样式包括：“float：left”

“数据”包含：“位置：相对”

如何防止Pane L超出父母的边界？

我知道我的CSS格式有问题，但无法弄清楚到底出了什么问题。

欢迎任何想法！

编辑：我已经提出了由rbighne推荐的解决方案，但它有副作用：从DATA面板直接空白空间，数据和PaneL之间变得消失......是否有任何解决方案没有任何水平影响？< / p>

Answer 1

您正在寻找clearfix。

.parent:after {
    content: "";
    display: table;
    clear: both;
}

（假设父母当然有类parent），这将确保Pane L向下按下父母的底部，直到父母只有Pane L那么高。

Answer 2

您应该在父容器上使用overflow: hidden，但这也会切断窗格L内的较长内容。使用overflow-y: scroll允许内容在内部滚动。