Margin-Top Not Working with Clear: Both

<div style='overflow:hidden'>  <div style="float: left;">Left</div>  <div style="float: right;">Right</div></div><div style="clear: both; margin-top: 200px;">Main Data</div>

margin-top is not working when i use clear:both

Clear floats after left,right.

Try:

HTML:

<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div class="clr"></div>
    <div id="bottom">bottom</div>
</div>

CSS:

#bottom {
    border-top:1px solid black;
    margin-top: 50px;
}
.clr{clear: both;}

Updated fiddle here.

Can someone explain to me why clear:both and margin-top cannot work in the same div

A margin is a minimal distance between an element and other elements in the same context. Floated elements are basically completely "taken out of context". They don't count for margin calculations. Any element calculating its position relative to other elements based on margins ignores floated elements entirely. So it's not that clear: both plus margin doesn't work, it's that margin ignores floated elements.

The clear: both merely causes the element to drop below all previous floated elements, its margin calculation does not push it further down because floated elements are ignored in margin calculations.

            +-------------------+ 
            |                   |
            |  display: block   |
            |                   |
            +-------------------+
                       +--------+
            ---        |        |
             |         | float: |
  margin XYZ |         | right  |
             |         |        |
            ---        +--------+
            +-------------------+  <-- effect of clear: both
            |                   |
            |    clear: both    |
            | margin-top: XYZpx |
            |                   |
            +-------------------+

The above margin XYZ says the element needs a minimal distance of XYZ to other regular elements. The next element that counts is the regular display: block element, and the distance to it is plenty. The right floating element is ignored. But the right floating element causes the lower block to be pushed down below its boundary due to clear: both.

margin-top doesn't work after clear: both

Try this:

#chat-messages ul li {    clear: both;    margin-top: 15px;    float: left;}

   <div style='overflow:hidden'>
     <div style='float: left; width: 50%;background:#bbb'>content</div>
     <div style='float: right; width: 49%;background:#bbb'>content</div>
    <div style='clear: both; margin-top: 0px;border:2px solid #ddd'>content</div>
   </div>

<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>

#container {
    overflow:hidden;
}
#one {
    float:left;
}
#two {
    float:right;
}
#three {
    margin-top: 20px;
}​

<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>

#container {
    overflow:hidden;
}
#one {
    float:left;
}
#two {
    float:right;
}
#three {
    margin-top: 20px;
}​

<div class="container">
    <div class="div1"></div> 
    <div class="div2"></div>
    <div class="clear-both"></div> 
    <div class="div3"></div>
</div>

.div1,
.div2,
.div3{
    width: 500px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f40b0b;
    margin: 10px;
}

.div1, .div2 {
    float: left;
}

.div3 {
    background-color: aqua;
}

.clear-both {
    clear: both;
}