0

I want margin-top:10px to be displayed on the top of box3. Here is the proper codes on firefox.
<div class="clear"></div> was written as a single line before div box3,and write div.clear{clear:both;} as a special part.

    div.box{
        width:105px;
        height:200px;
        border:1px solid red;
        }
    div.box1{
        float:left;
        width:50px;
        height:50px;
        border:1px solid red;
        }
    div.box2{
        float:left;
        width:50px;
        height:50px;
        border:1px solid red;
        }
    div.clear{
        clear:both;
    }

    div.box3{
        width:100px;
        height:80px;
        border:1px solid red;
margin-top:10px;
        }
<body>
    <div class="box">
    <div class="box1">box1</div>
     <div class="box2">box2</div>
     <div class="clear"></div>
     <div class="box3">box3</div>
    </div>
</body>

Now i move clear:both; in the div.box3,the whole css code as below.

    div.box{
        width:105px;
        height:200px;
        border:1px solid red;
        }
    div.box1{
        float:left;
        width:50px;
        height:50px;
        border:1px solid red;
        }
    div.box2{
        float:left;
        width:50px;
        height:50px;
        border:1px solid red;
        }
    div.box3{
    clear:both;
        width:100px;
        height:80px;
        border:1px solid red;
        margin-top:10px;
        }
<body>
    <div class="box">
    <div class="box1">box1</div>
     <div class="box2">box2</div>
     <div class="clear"></div>
     <div class="box3">box3</div>
    </div>
</body>

No 10px at the top of div.box3.
I know right way to solve it ,want to know the principle behind the proper css code.

showkey
  • 482
  • 42
  • 140
  • 295
  • 1
    Read up on [collapsing margins](https://www.w3.org/TR/CSS2/box.html#collapsing-margins) – j08691 May 09 '16 at 14:26
  • Possible duplicate of [margin-top not working with clear: both](http://stackoverflow.com/questions/4198269/margin-top-not-working-with-clear-both) – Sebastian Brosch May 09 '16 at 14:28

0 Answers0