float and block box with overflow other than visible

tables, block replaced elements and block boxes with overflow other than visible establish their own block formating context. Therfore their borders do not overlap with margin of floated element

by bakhshi

HTML

<div class="main"></div><div class="inner">hdhdj h u u hfnf f f f </div></div>

CSS

Div{
border: solid 2px blue;
Width:100px;
Height:100px;
}

.main{
float:left;
margin:30px;
}
.inner{
//border-color: red;
border:none;
overflow:hidden;
}