The width of each box is 100 pixels. When you float one over the other, there is no more horizontal space left in the second box for its content because it's completely occupied by the float, so the content has to wrap to the next line (and overflow the 100-pixel height in that process).
If you make the second box wider, the content will appear next to the float:
.box1 {
width: 150px;
height: 100px;
background-color: red;
}
The content will never appear behind the float, however, because inline content will always wrap around floats (otherwise, floating won't be very useful).