Question

我创建了一个JSFiddle来描述我的意思：

我希望我的.top部分受到.floated-div高度的影响，如您所见。目前，我的.floated-div内容已超出.bottom部分，这不是我想要的。 .floated-div的高度需要决定.top部分的高度，有效地推动.bottom以便为其腾出空间。

我认为Clear divs是我想要的解决方案，但它没有给我我追求的行为。我认为这只适用于.top的主要内容与floated-div类似的div而不是以这种方式嵌入的情况。

我可以添加类似清除的内容，但我无法调整此代码的结构，因为它是通过CMS生成的内容。

HTML

<section class="top">
    <h1>test</h1>
    <p>some content</p>
    <div class="floated-div">
        <h2>aside content</h2>
        <p>some aside content</p>        
        <p>some aside content</p>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</section>
<section class="bottom">
</section>

CSS

.top{
    width: 60%;
    height:auto;
    background:#f1f1f1;
}
.floated-div{
    width:40%;
    position:absolute;
    right:0;
    top:0;
}
.clear{
    clear:both;
}
.bottom{
    width: 100%;
    height:100px;
    background:#d1d1d1;
}

Answer 1

问题是你的.float-div实际上并没有浮动。由于“position：absolute”规则，它永远不会影响父容器的高度（这就是绝对定位的含义）。要使其浮动，您需要删除此规则并将“float：right”添加到div。在这种情况下，清关将完成其工作。

floated-div { 
    float: right;
    width: 40%;
}

以下是工作示例：http://jsfiddle.net/qvgz4/

Answer 2

我将此添加到您的CSS并且它有效：

 .floated-div > p{margin:0;} /**added**/
 .floated-div > h2{margin-bottom:0;}/**added**/


.top{
    width: 60%;
    height:auto;
    background:#f1f1f1;
    margin-bottom:5%; /*** added to avoid div overlap **/
}

基本上<p>占用了floated-div1中的额外区域，通过margin清除了它们！

Answer 3

如果您希望顶部块的高度适应浮动div的高度，那么您不能绝对定位浮动div。那么你唯一的选择是将它漂浮到右边。

但是这会将它置于它之前的H1和P之下。避免这种情况的唯一方法是将H1和P从文档流中取出。我们以绝对定位来做到这一点。

此解决方案仅在浮动div的高度始终大于H1和P时才有效。您还需要摆弄H1和P的左侧和顶部位置以使其恰到好处。

http://jsfiddle.net/3yGLT/15/

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.top {
    height:auto;
    background:#f1f1f1;
}
.top > h1,
.top > p {
    position: absolute;
    width: 60%;
    left: 10;
}
.top > p {
    top: 40px;
}
.floated-div {
    width:30%;
    float: right;
}
.bottom{
    width: 100%;
    height:100px;
    background:#d1d1d1;
}

Answer 4

如果我正确理解了这个问题，我认为最好的选择是使用display：table，就像这样的CSS：

.top{ display:table; width:100%;}
.top .side { display:table-cell; padding:.5em;}
.top .left { width:60%;  background:#f1f1f1;}
.top .right { width:40%;}

http://jsfiddle.net/3yGLT/8/

Answer 5

不触摸html，您可以按照以下方式执行

.top{
        width:100%;
        background:#f1f1f1;
        float:left;
    }
.top > h1{
    width:60%;
    float:left;
    position:relative;
}
.top > p{
    width:60%;
    float:left;
    position:absolute;
    margin-top:50px; // margin-top depend on your h1 height
}
.top .floated-div{
    width:40%;
    float:right; 
}
.clear{
    clear:both;
}
.bottom{
    width: 100%;
    height:100px;
    background:#d1d1d1;
    float:left;
}

浮动内部Div以影响父级的高度

5 个答案: