Esempio di utilizzo di clear

In questo esempio, due box flottanti sono seguiti da un elemento con clear: both per impedirne il posizionamento accanto.


Box 1
Box 2
Questo box è posizionato sotto i float

CSS e HTML per l'esempio con clear:

  
  <style>
    .float-box {
      width: 100px;
      height: 100px;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      background-color: #50a14f;
      color: white;
      text-align: center;
      line-height: 100px;
      border-radius: 8px;
    }

    .clear-box {
      clear: both;
      background-color: #e45649;
      padding: 20px;
      color: white;
      font-size: 18px;
      border-radius: 8px;
    }
  </style>
  
  <div class="float-box">Box 1</div>
  <div class="float-box">Box 2</div>
  <div class="clear-box">Questo box è posizionato sotto i float</div>