Como posso parar de flutuar para a esquerda?

97

Eu tenho o seguinte código:

<div style="float: left; width: 100%;">
  <label style="float: left;">ABC</label>  
  <input style="float: left; font-size: 0.5em;" type="button"   onclick="addTiny(0,'Question_Text'); return false;" value="&#x25BC;" title="Editor" />   
  <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="&#x25B2;" title="Hide" />   

  <div class="adm">
    <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
      abc
    </textarea>
  </div>
</div>

Meu problema é que o div com a classe adm flutua para a esquerda e segue na mesma linha que o rótulo e dois botões de entrada. Existe uma maneira de fazer essa mudança para longe da flutuação?

css html css-float

— TonyG
fonte

Você deve aceitar uma resposta, mesmo que seja a sua.

— DᴀʀᴛʜVᴀᴅᴇʀ

101

Uma abordagem padrão é adicionar um div de limpeza entre os dois elementos de nível de bloco flutuante:

<div style="clear:both;"></div>

— Sável
fonte

3

Mas, em alguns casos, você precisa adicionardisplay:block

— Volodymyr Levytskyi

62

Às vezes, o claro não funciona. Use float: nonecomo uma substituição

— DanKodi
fonte

2

Sim, se você deseja substituir uma entrada CSS existente float: left(ou direita), esta é a solução.

— Alexis Wilke

28

Você pode modificar .adme adicionar

.adm{
 clear:both;
}

Isso deve fazer com que ele mude para uma nova linha

— Brett
fonte

Isso deveria ser, .admeu acho.

— tjm

9

adicione style="clear:both;"ao "adm" div.

— tjm
fonte

4

Ok, acabei de perceber que a resposta é remover o primeiro flutuador à esquerda do primeiro DIV. Não sei por que não vi isso antes.

— TonyG
fonte

3

Você também deve verificar a propriedade "clear" no css caso a remoção de um float não seja uma opção

— Trey
fonte

3

O css clear: leftem sua classe adm deve impedir que o div flutue com os elementos acima dele.

— Chris Kent
fonte

0

Basta adicionar overflow:hiddeno primeiro divestilo. Isso deve ser o suficiente.

— ensolarado
fonte

0

Por algum motivo, nenhuma das correções acima funcionou para mim (eu tive o mesmo problema), mas isso funcionou:

Tente colocar todos os elementos flutuavam em um elemento div: <div class="row">...</div>.

Em seguida, adicione este CCS: .row::after {content: ""; clear: both; display: table;}

— Ezgor
fonte