html - Why the `clear:both` can not written into div.box3? -
i want margin-top:10px displayed on top of box3. here proper codes on firefox.
<div class="clear"></div>
written single line before div box3,and write div.clear{clear:both;}
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 move clear:both;
in div.box3,the whole css code 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 @ top of div.box3.
know right way solve ,want know principle behind proper css code.
Comments
Post a Comment