•  
     

Desobstruindo elementos com clear - HTML e CSS

Infelizmente, algumas vezes misturamos vários elementos flutuantes com outros não flutuantes, e os elementos acabam ficando uns sobre os outros.

Vê o seu rodapé (o espaço azul entre as duas colunas)? Ele está preso lá porque não o informamos de algo muito importante: usar clear para se posicionar entre os elementos da página!

Se você passar a instrução clear: left para um elemento, ele imediatamente vai se mover para baixo de todos os elementos flutuantes do lado esquerdo da página; isso também serve para os elementos da direita, right. Se você disser clear: both, ele vai sair do caminho dos elementos flutuantes da esquerda e da direita!

A sintaxe é aquela com a qual você já está acostumado:

Código: Selecionar todos

element {
    clear: /*right, left, ou both (direita, esquerda, ou ambos)*/
}


HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>


CSS

Código: Selecionar todos

div{
border-radius:5px;
}
#header{
height:50px;
background-color:#F38630;
margin-bottom:10px;
}
.left {
height:300px;
width:150px;
background-color:#A7DBD8;
float:left;
margin-bottom:10px;
}
.right{
height:300px;
width:450px;
background-color:#E0E4CC;
float:right;
margin-bottom:10px;
}
#footer{
height:50px;
background-color:#69D2E7;
clear:both;
}


Demo: http://jsfiddle.net/s4fzffjz/