如何清除当前div中的浮动？

Question

我有以下HTML：

<div class="wrapper">
    <div class="left-block">
        <p>
            some text
        </p>
    </div>
    <div class="right-block">
        <p>
           some text
        </p>
        <div class="some-block">654</div>
        <div class="some-block">132</div>
        <div class="some-block">987</div>
        <div class="clear"></div>
        <div class="regular-block">10002</div>
    </div>
</div>

类left-block和some-block的

块具有属性float:left 这看起来像http://jsfiddle.net/5k5v67jj/ 类clear的阻止具有clear:left;

如何在此屏幕截图中设置阻止regular-block：

Answer 1

您必须在block formatting context中包含浮动和清除。要设置此类上下文，通常的做法是使用overflow:auto或overflow:hidden。您可以使用＆＃34;右侧块＆＃34;将其添加到div的样式中。类。

请参阅http://jsfiddle.net/5k5v67jj/1/

Answer 2

我会将.some-block从float:left;更改为display:inline;。这样，像.regular-block这样的标准div会自动显示在下面，你不需要明确它们之间。

然后你可以将clear div放在底部来修复块高：

＆＃13;

＆＃13;

.wrapper{
    border: 1px solid brown;
}
.left-block{
    float:left;
    width:100px;
    padding:5px;
    border: 1px solid red;
}
.right-block{
    margin-left: 112px;
    border: 1px solid green;    
    padding:5px;
    padding-bottom:0;
}
.some-block{
    display:inline;
    border: 1px solid yellow;  
}
.regular-block{
    margin-top:10px;
    border: 1px solid violet;  
}
.clear{
    clear:left;
}

＆＃13;

<div class="wrapper">
    <div class="left-block">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, lorem dapibus tristique rhoncus, justo erat volutpat erat, in malesuada enim libero quis metus. Nunc tristique maximus efficitur. Sed nec dolor ut quam consequat molestie id quis justo. 
        </p>
    </div>
    <div class="right-block">
        <p>
            Nunc a lectus enim. Quisque sit amet iaculis turpis, a auctor tortor. Mauris aliquet sapien non odio tempor, auctor gravida nunc commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum eu tellus vel volutpat. Cras sed neque egestas, ullamcorper purus id, viverra odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et malesuada est, et bibendum lectus. 
        </p>
        <div class="some-block">654</div>
        <div class="some-block">132</div>
        <div class="some-block">987</div>
        <div class="regular-block">10002</div>
        <div class="clear"></div>
    </div>
</div

＆＃13;

＆＃13;

＆＃13;