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

/* Container mit Hintergrundfarbe  */
.container  {
    background-color: grey;
    height: 120px;
}

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

/* Zweites Beispiel:   */
/* Container mit Hintergrundfarbe  */
.container1  {
    background-color: grey;
}

/* die Box1 bekommt Breite, Höhe, Hintergrundfarbe, Abstand und float  */
.box1  {
    width: 100px;
    height: 100px;
    background-color: red;
    
    margin: 10px;
    
    float:  left;
}

/* clear bekommt Höhe, Abstand, Hintergrundfarbe,  und clear: both;  */
/* clear ist im container1 und passt sich automatisch an mit clear: both;  */
.clear  {
    height: 100px;
    margin: 20px;
    
    clear: both;
   
    background-color: yellow;
}

/* Drittes Beispiel:   */
/* Container mit Hintergrundfarbe  */
.container2  {
    background-color: grey;
    height: 220px;
}

/* die Box2 bekommt Breite, Höhe, Hintergrundfarbe, Abstand und clear: both;  */
.box2  {
    height: 100px;
    background-color: green;

    margin: 20px;
     
    clear: both;
}

/* Viertes Beispiel:   */
/* Container mit Hintergrundfarbe  */
.container3  {
    background-color: grey;
}

/* die Box3 bekommt Breite, Höhe, Hintergrundfarbe, Abstand und float: left;  */
.box3  {
    width: 100px;
    height: 100px;
    
    background-color: blue;

    margin: 20px;
    float:  left;
}

.clear1  {
    clear: both;
    background-color:#00FFFF ;
}