Can Someone Explain to Me Why Clear:Both and Margin-Top Cannot Work in The Same Div

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 not working with clear: both

You could put the two floated divs into another one that's got "overflow: hidden" set:

<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.

Why margin property is not working in the container3 after using clear property (css)?

Alright then,

1- When clear: both; a div, you clear what's beside it on left and right, so div#3 clear is doing nothing...

(for example: if you give both div#1 and div#2 clear: both; each div will take it's own block and it ruin the float: left;
2- To break the float in this case, you don't need clear" both; in any of these divs, it'll be a div itself to clear and sperate!

3- Since the divs has the same CSS style, we should select all at once (read more: CSS Selector Reference).

HTML:

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

CSS:

.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;
}

Why does this CSS margin-top style not work?

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  
  
  • top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

• Float either of your div elements
• Make either of your div elements inline blocks
• Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
• Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.

Why top margin of html element is ignored after floated element?

You've correctly identified the problem. The floated <div> is no longer used to calculate the top margin, and therefor the 2 <div>'s just butt against each other. A simple way to solve this is just to wrap the 2nd <div>. This will allow the wrapper to (invisibly) butt up against the first <div>, and allow you to specify white space for it.

The trick to getting the wrapper to work right is to have the white space be internal white space. In other words, the wrapper uses padding instead of margin. This means whatever is going on outside the wrapper (like other floating elements) won't really matter.

<div style="float: left; border: solid red 1px">foo</div><div class="wrapper" style="clear: both; padding-top: 90px;">    <div style="border: solid red 1px">This div should not touch the other div.</div></div>

Why the margin-top can work?

clear should be used in a div under the two floated elements, but not in the box3. clear "specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them'.

You can add a div that will clear: both; (move down everything), so that it will move down everything after the floated elements

css:

.box{
    width:105px;
    height:200px;
    border:1px solid red;
  }

.box1{
  float:left;
  width:50px;
  height:50px;
  border:1px solid red;
}

.box2{
  float:left;
  width:50px;
  height:50px;
  border:1px solid red;
}

.box3{
  width:100px;
  margin-top:20px;
  height:50px;
  border:1px solid red;
}

.clearfix {
  clear: both;
}

html

<div class="box">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="clearfix"></div>
  <div class="box3">box3</div>
</div>

margin-top doesn't work after clear: both

Try this:

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

---

Related Topics