Как контролировать свойство float на div

Question

Я делаю эту простую веб-страницу, и у меня возникла проблема при попытке установить float: осталось до кучи div. Я создал класс aluno и прикладной float: слева, проблема в том, что остальные div из других классов, следующих за этим, также были перемещены влево. Что я могу сделать, чтобы предотвратить это?

Мой HTML-код:

<div class ="main"> 
    <div class = "aluno"> 
     <p> 
      Cena 
      <button type="button" onclick="show('img')">+</button> 
     </p> 
     <p><img id="img1" src="img/img1.png" ></p> 
    </div> 

    <div class = "aluno"> 
     <p> 
      Cena 
      <button type="button" onclick="show('img')">+</button> 
     </p> 
     <p><img id="img" src="img/img.png"></p> 
    </div> 

<div class = "teste"> 
</div> 

Мой CSS код:

.aluno{ 
    float:left; 
    padding-left: 70px; 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 1

Добавить clear:both в .teste.

Четкое CSS свойство определяет, может ли элемент быть рядом с плавающих элементов, которые предшествуют его или должны быть перемещены вниз (выяснены) под ними.

.teste{ 
     clear: both; 
    } 

JS Fiddle:http://jsfiddle.net/LhtrC/

Answer 2

Вы можете использовать float:none на других классов.