*   {
    font-family: Arial, sans-serif;
}

    /* die Box bekommt Breite und Höhe und Hintergrundfarbe  */
.box1  {
    width: 100px;
    height: 100px;
    background-color: pink;
}

/* Absatz ist ein Blockelement */
/* man sieht an der Ausrichtung, dass Absatz ein Blockelment ist */   
p   {
    background-color:   #CEFFFF;
    width: 500px;
}

/* Box2 und Absatz - jeweils in eigener Zeile */
.box2  {
    width: 100px;
    height: 100px;
    background-color: blue;
}

/* mit float: left;   wird der Absatz um die Box gelegt  */
.box3  {
    width: 100px;
    height: 100px;
    background-color: green;

    float: left;
}

/*Box4 mit float: right;  */
.box4  {
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}

/* Jetzt mehrere Inline-Elemente, welche nebeneinander stehen können*/
/* Das ist für Responsiv wichtig  */

.box5  {
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 10px;
    float: left;
}