¿Cómo puedo dejar de flotar a la izquierda?

97

Tengo el siguiente 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>

Mi problema es que el div con la clase adm flota a la izquierda y, por lo tanto, va en la misma línea que la etiqueta y dos botones de entrada. ¿Hay alguna manera de que pueda hacer este cambio para dejar de flotar?

css html css-float

— TonyG
fuente

Debes aceptar una respuesta, incluso si es tuya.

— DᴀʀᴛʜVᴀᴅᴇʀ

101

Un enfoque estándar es agregar un div de compensación entre los dos elementos de nivel de bloque flotante:

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

— Sábalo
fuente

3

Pero en algunos casos es necesario agregardisplay:block

— Volodymyr Levytskyi

62

A veces, clear no funcionará. Usar float: nonecomo anulación

— DanKodi
fuente

2

Sí, si desea anular una entrada CSS existente float: left(o hacia la derecha), esta es la solución.

— Alexis Wilke

28

Podrías modificar .admy agregar

.adm{
 clear:both;
}

Eso debería hacer que se mueva a una nueva línea

— Brett
fuente

Eso debería ser .adm, creo.

— tjm

9

añadir style="clear:both;"al "adm" div.

— tjm
fuente

4

Bien, me acabo de dar cuenta de que la respuesta es eliminar el primer flotador que queda del primer DIV. No sé por qué no vi eso antes.

— TonyG
fuente

3

También debe verificar la propiedad "clear" en css en caso de que eliminar un flotador no sea una opción

— Trey
fuente

3

El CSS clear: leften su clase adm debería detener el div flotando con los elementos encima de él.

— Chris Kent
fuente

0

Solo agrega overflow:hiddenel primer divestilo. Eso debería bastar.

— soleado
fuente

0

Por alguna razón, ninguna de las correcciones anteriores funcionó para mí (tuve el mismo problema), pero esto funcionó:

Intente poner todos los elementos flotantes en un elemento div: <div class="row">...</div> .

Luego agregue este CCS: .row::after {content: ""; clear: both; display: table;}

— ezgor
fuente