css float issue in ie6&ie7

Question 1

Your second div is clearing your first, but only the text. If you set a left margin you can tell it to sit next to the floated div.

http://jsfiddle.net/Pjvtb/

.div2 {
    margin-left: 100px; /* new line */
    background: yellow;
}

Note: IE 6 and 7 incorrectly move the second div past the first one, due to hasLayout. You can search online for more information about the problems associated with it. There is also a 3px "text jog" present in IE 6 (possibly 7 too, I can't remember) which usually meant, to display the same in all browsers, one would actually make the margin-left: 103px to accommodate IE's weirdness.

Question 2

   <!DOCTYPE html>
<html>
<head>
<title>lily</title>
<style>
    div{width: 100px; height: 100px;}
    .div1{background: red; float: left;}
    .div2{background: yellow; clear:both;}
</style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>

enter image description here

Question 3

First things first, try it with both of the divs floating and see what happens.

HERE is a FIDDLE with each scenario for you to test.

 /* yours */
.yours div {
    width: 100px; 
    height: 100px;
}

.yours .div1 {
    background: red; 
    float: left;
}

.yours .div2 {
    background: yellow;
}


/* mine */
.mine div {
    width: 100px;
    height: 100px;
    float: left;
}

.mine .div1 {
    background: red;
}

.mine .div2 {
    background: yellow;
}


/* mine with a cleared float */
.mine-too div {
    width: 100px;
    height: 100px;
    float: left;
}

.mine-too .div1 {
    background: red;
}

.mine-too .div2 {
    background: yellow;
    clear: left;
    /* not BOTH - you only need left - there is no right... */
}