浮动 div 溢出问题中的内容答案

【问题标题】：Contents in the float div overflow issue浮动 div 溢出问题中的内容
【发布时间】：2015-01-09 17:27:42
【问题描述】：

我遇到了关于浮动样式的问题。就像下面的html代码：

...
<body>
    <div style="float:left;width:25%;height:100px;background-color:red;"></div>
    <div style="float:left;width:74%;height:100px;border:1px solid black;">
        <div style="width:1000px;height:50px;background-color:yellow;"></div>
        <div style="clear:both;"></div>
    </div>
</body>
...

效果是第2个float div里的内容溢出了。黄色 div 位于浮动 div 中，但其宽度超过其父级。我想知道如何设置 css 样式以使第二个浮动 div 可以自动适应其子元素的宽度/高度？我知道 clear style 可以清除按顺序列出的 div 的浮动，但是当它包含更大的孩子时如何处理呢？我不想用js来修改父div的宽度。

【问题讨论】：

标签： html css css-float overflow

【解决方案1】：

您可以通过使用min-height 和min-width 来实现此目的。这样，当孩子变大时，父母总是会适应孩子的高度和宽度。

查看here。

【讨论】：

【解决方案2】：

通过删除width 和height 属性（或将min-heigh 和min-width 属性设置为Stephan mentioned，您将使父div 延伸到子div。

http://jsfiddle.net/5ohtx2nc/1/

然而，这会导致如果它们比屏幕宽，第二个浮动 div 将移动到下一行

http://jsfiddle.net/5ohtx2nc/

如果您坚持让两个 div 并排放置，您将需要做一些技巧，例如 How to position two divs side by side where the second width is 100%?

http://jsfiddle.net/5ohtx2nc/3/

【讨论】：