float + clear

Esempio pratico di utilizzo della proprietà float utilizzata assieme alla proprietà clear.
Di seguito viene mostrato anche il CSS completo.

Esempio:

div#box-1{
float:left;
}

div#box-1{
float:right;
}

div#box-1{
clear:right;
}

Codice CSS:

#box-1{
float:left;
border:2px solid #900;
margin:5px;
padding:0.4em;
width:350px;
height:100px;
background-color:#fafafa;
color: #900;
}
#box-2{
float:right;
border:2px solid #900;
margin:5px;
padding:0.4em;
width:300px;
height:100px;
background-color:#fafafa;
color: #900;
}
#box-3{
clear:right;
border:2px solid #900;
margin:5px;
padding:0.4em;
width:300px;
height:100px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo utilizzato tre div: box-1 e box-2 con float rispettivamente left e right; il box-3 con clear:right.
Grazie alla proprietà clear:right è possibile annullare l'effetto della proprietà float:right del box-2.

torna alla pagina precedente