0

Tenho usado bastante o float: léft; ultimamente, mas há vezes que ele não funciona como eu espero. Exemplo: com float e margin estranha

(imagem 1) Reparem que aparece uma margin que não deveria estar aqui. sem float o menu fica normal, mas o resto fica todo estranho (imagem 2) A margin some, mas como não tem float a outra div fica na linha de baixo.

O objetivo do código é fazer um menu superior parecido com esse: inserir a descrição da imagem aqui

Ele não deveria apenas jogar as divs uma ao lado da outra? Como fixo isso? Por que ele faz isso?

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);

*{margin: 0; padding: 0;}

body{
    background: #ecf0f1;
    color: #2c3e50;
    font-family: 'Open Sans', sans-serif;
}

.top-menu{
    width: 100%;
    height: 50px;
    background: #c0392b;
    border-bottom: 4px solid #96271C;
    color: #f2f2f2;
    position: fixed;
}

.top-menu .content{
    width: 900px;
    margin: 0 auto;
}

.burger-menu{
     background: #96271C;
     height: 100%;
     width: 100px;
     float: left;
     position: relative
}

.burger > div{
    width: 21px;
    height: 4px;
    border-radius: 2px;
    display: block;
    background: #fff;
    margin-bottom: 4px;
}

.burger{
    float: left;
    margin: 15px 10px;
}

.burger-menu{
    font-size: 18px;
    text-transform: uppercase;
    line-height: 50px;
}

.title-section{
    width: 300px;
    margin: 0 auto;
    float: left;
    display: block;
    position: relative;
}

.title-section .title{
    text-align: center;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 50px;
    font-weight: 300;
}

.search-section{
    width: 160px;
    height: 30px;
    margin-top: 10px;
}

.search-section input, input:focus{
    width: 160px;
    height: 30px;
    background: #96271C;
    border-radius: 3px;
    border: 1px #ecf0f1 solid;
    padding:5px;
    color: #f2f2f2;
    outline: none;
}



::-webkit-input-placeholder {color: #f2f2f2;}
:-moz-placeholder {color: #f2f2f2;}
::-moz-placeholder {color: #f2f2f2;}
:-ms-input-placeholder {color: #f2f2f2;}
<!DOCTYPE HTML5>
<html>
    <head>
        <meta charset="utf-8">
        <title>Menu G1</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    
    <body>
        <div class="top-menu">
            <div class="content">
                <div class="burger-content">
                    <div class="burger-menu">
                            <div class="burger">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>menu
                    </div>
                </div>
              
                <div class="title-section">
                    <div class="title">Política
                        </div>
                </div>
                
                <div class="search-section">
                    <input type="text" placeholder="Pesquisar" name="pesquisa-menu">
                </div>
            </div>
        </div>
    </body>
</html>

1
  • Eu acho que seria importante você editar a postagem e deixar bem claro o resultado que quer obter, em vez de querer usar o float:left em qualquer ocasião. Pode acontecer de no seu caso o float:left não ser adequado pra isso. Ou se quer só aprender sobre o float, aí a pergunta já é outra, e as imagens pra cima não são mais relevantes. Lembre-se que quanto mais objetiva a pergunta, maior a chance de uma boa resposta, pois boas respostas dependem da comunidade entender o problema de fato, e não só os desdobramentos que o problema causa.
    – Largato
    Commented 4/06/2016 às 22:49

2 Respostas 2

2

FEIJAO COM ARROZ DO FLOAT:

Pra exemplificar vamos então criar uma div wrap, ela será o elemento pai que servirá de referencia pra conter os elementos flutuantes.

Dentro desse elemento pai teremos duas caixa A e B, vamos usar elas pra brincar com o float. Esse será a nossa estrutura:

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
</div>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
   display:block;
   background:red;
   padding:50px 0;
   width:120px;
}
.B{
   display:block;
   background:blue;
   padding:50px 0;
   width:120px;
   text-align:center;
}

Dê uma olha no link pra você entender melhor: https://jsfiddle.net/ow6ds5bk/

Primeiramente vamos flutuar as duas caixas pra esquerda, então vamos colocar o float NOS DOIS ELEMENTOS que queremos flutar

.A{float:left}
.B{float:left}

Se você olhar no nosso código https://jsfiddle.net/ow6ds5bk/3/ verá que flutuou os elementos como o pretendido, porém algo está errado. O elemento pai se desmanchou, e o restante da página continuou sendo flutuado. Vamos corrigir isso.

Vamos criar uma classe clear, ela servirá pra resetar a flutuação após as nossa caixas, assim não afetará o resto da página e tambem vai consertar o nosso elemento pai:

.clear{
  clear:both;
}

Agora o nosso html ficará assim:

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="clear"></div>
</div>
<span>Float é fácil</span>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
  display:block;
  background:red;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.B{
  display:block;
  background:blue;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.clear{
  clear:both;
}

Se você olhar para a nossa pagina verá que alcançamos a estrutura desejada: https://jsfiddle.net/ow6ds5bk/4/

Você precisa ficar atento também para o tamanho dos elementos, se a soma do width de todos os elementos superarem o width do elemento pai, algumas coisas podem ser empurradas pra baixo, veja: https://jsfiddle.net/ow6ds5bk/5/

Toda propriedade que mexe com a dimensão do elemento também deve ser considerada pra conta: margin, padding, border, width, etc.

Agora Vamos ousar mais, queremos um elemento à direita e o outro à esquerda. Não é difícil basta usar a mesma lógica:

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="clear"></div>
</div>
<span>Float é fácil</span>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
  display:block;
  background:red;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.B{
  display:block;
  background:blue;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:right;
}
.clear{
  clear:both;
}

Mamão com açúcar né? Veja como ficou o nosso exemplo: https://jsfiddle.net/ow6ds5bk/7/

Legal, agora vamos colocar os dois elementos pra direita, basta usar a mesma lógica anterior certo? ERRADO: https://jsfiddle.net/ow6ds5bk/8/

Veja que as caixas ficaram invertidas, isso acontece por que a caixa A é o primeiro elemento a ser exibido, então ele será o primeiro flutuado pra direita.

Pra resolver isso vamos criar um elemento que flutuará pra direita, ele vai abrigar as nossas 2 caixas. As caixas flutuarão pra esquerda fazendo o efeito que nós procuramos:

<div class="wrap">
  <div class="right-container">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
  display:block;
  background:red;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.B{
  display:block;
  background:blue;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.right-container{
  float:right;
}
.clear{
  clear:both;
}

Veja como ficou agora o nosso exemplo https://jsfiddle.net/ow6ds5bk/6/ coisa linda!

Acho que isso é básico pra trabalhar com float sem ter sustos. Mas usar float pra montar o layout do site não é legal, existem muitas outras alternativas que você pode e deve usar: grids, frameworks html, flex. A menos é claro se você não se preocupa em se desesperar sempre que a sua página é exibida numa resolução diferente.

Apesar de não ser recomendado, é bom saber. Vai que um dia você precisa dar manutenção num site montado com float?


ATUALIZAÇÃO:

Se você der uma olhada no código, verá que eu fiz uma marcação no código pra definir onde deve ocorrer a limpeza das flutuações. Mas essa é uma técnica muito antiga, antes do CSS2, quanto não tínhamos os seletores :before e :after .

Podemos utilizar uma técnica mais moderna pra realizar a mesma função:

Basta criar a classe clearfix:

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

Basta adicionar a classe clear fix no elemento pai referente aos elementos que receberão a flutuação.

<div class="wrap clearfix">
  <div class="A">A</div>
  <div class="B">B</div>
</div>
<span>Float é fácil</span>

Assim você terá um código mais limpo. Veja como o nosso exemplo ficou: http://codepen.io/anon/pen/ezZGOw

2

A real utilidade do float é fazer um bloco flutuar em cima de bloco de texto, como por exemplo aquelas colunas de jornal.

Ele não serve para fazer layout, utilizam ele como gambiarra já que não existia um padrão pra fazer esse tipo de coisa, você até consegue fazer layout com Float mas é uma dor de cabeça horrivel que só quem já fez e teve que dar manutenção no código sabe.

Dá uma olhada em Flexbox, ele resolve parte do problema de fazer layout, tem uns frameworks que implementam ele pra você usar com Sass e Stylus, já tem um bom suporte dos navegadores e é uma coisa linda trabalhar com ele <3

4
  • Realmente, refiz o Layout usando flexbox e é muito mais fácil de mandar! Valeu.
    – bonifacio
    Commented 5/06/2016 às 3:13
  • Brother, embora vc teve o aceite na resposta e 2 positivos, acredito que deveria rever seu conceito sobre float... Ele permite que os elementos flutuem a sua direita ou a esquerda, ou float:none, que nega a flutuação ao seu redor.. Elementos posicionados absolutamente ignoram a propriedade float.
    – MagicHat
    Commented 9/06/2016 às 4:19
  • 1
    Um adendo, o flex css não tem suporte a todos os navegadores. Os malditos IE6~9 não suportam o comando e mesmo a versão mais atual do IE ainda apresenta alguns bugs. Versoes mais antigas do navegador padrao do android também não suportam, porém não é um problema pra se alarmar, o suporte do Flex atinge cerca de 90% dos usuários, só será um problema se você precisar dar suporte pros IE antigos Commented 9/06/2016 às 5:39
  • se liga na dica: youtube.com/watch?v=qBxGXb4iTQw&feature=youtu.be
    – Igor Luíz
    Commented 13/06/2016 às 2:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .