How to clear float only in curent div? - html

Question

I have the followin g 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>
blocks with class left-block and some-block have property float:left
This looks like http://jsfiddle.net/5k5v67jj/
block with class clear has clear:left;
How can I make block regular-block to like on this screenshot:

Answer 1

You have to contain the float and the clear in a block formatting context. To set up such a context, a common practice is to use overflow:auto or overflow:hidden. You'd add this to the styling of the div with the "right-block" class.
See http://jsfiddle.net/5k5v67jj/1/

Answer 2

I would change .some-block from float:left; to display:inline;. That way, a standard div like .regular-block will automatically show underneath and you don't need a clear between them.
Then you can put the clear div at the bottom to fix the block heights:
.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;
}
<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