elementos flotantes <br clear="both"/> de una manera mejor css?

Tengo algunos elementos flotantes como una barra lateral que flotaba además de un área de contenido. Si no agrego un <br clear="both"/> al final de la barra lateral, el pie de página y partes del fondo flotan de forma extraña.elementos flotantes <br clear="both"/> de una manera mejor css?

¿Alguna solución rápida que me olvidé pensar?

Gracias.

Edit: Por ejemplo, quiero que los bordes no tengan espacios vacíos y que los fondos tampoco tengan espacios. Sólo debe verse como dos secciones: 1) el contenido con la barra lateral 2) de pie de página

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>layout</title> 

    <style type="text/css"> 

    body { 
     margin:0; 
     padding:0; 
    } 

    #main { 
     background:#cfcfcf; 
    } 

    .inner { 
     margin: 0 auto; 
     padding: 96px 72px 0; 
     width: 1068px; 
     border-color: #000; 
     border-style: solid; 
     border-width: 0 1px; 
     color: #3C3C3C; 
    } 

    .post { 
     width: 705px; 
     background:#999; 
     float:left; 
    } 

    #comments, #respond { 
     background:#999; 
    } 

    #sidebar { 
     background:#777; 
    } 

    #footer { 
     clear:both; 
     background:gray; 
    } 

    </style> 
</head> 
<body> 

    <div id="main"> 

     <div class="inner"> 

      <div id="post" class="post"> 

       <h2>Lorem Ipsum Test Page</h2> 

       <div class="entry"> 

        <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

       </div> <!-- entry --> 

      </div> <!-- post --> 

      <div id="sidebar"> 

       <h2>Meta</h2> 
        <ul> 
         <li>Login</li> 
         <li>Anything</li> 
        </ul> 

       <h2>Subscribe</h2> 
        <ul> 
         <li>Entries (RSS)</li> 
         <li>Comments (RSS)</li> 
        </ul> 

      </div> <!-- sidebar --> 

     </div> <!-- inner --> 

    </div> <!-- main --> 

    <div id="footer"> 
     <div class="inner"> 

     Something 

     </div> <!-- inner --> 
    </div> <!-- footer --> 

</body> 
</html>

Fuente

2011-01-12 matt

¿Cuál es su código HTML y CSS para los divs? – BoltClock

Buen artículo: http://css-tricks.com/all-about-floats/ – kapa

Puede configurar los elementos que contienen overflow propiedad a algo que no sea visible.

Fuente

2011-01-12 20:32:24 Jim

Ver también http://www.quirksmode.org/css/clearing.html – yorick

funcionó si configuré el div .inner desbordamiento: oculto! Me pregunto si también funciona en IE – matt

Se podía hacer que el pie de página por lo que tiene un estilo con clear: both.

Fuente

2011-01-12 20:29:20 Jacob

La forma correcta es despejar la izquierda y la derecha para el siguiente elemento.

Así que en el pie de página se podría añadir:

#footer { 
    clear: both; 
}

Esto obligaría al pie de página para bajar a la línea siguiente, y es la forma 'adecuada'. También será más fácil cambiar su diseño más adelante porque no tendrá que cambiar el marcado, solo el CSS.

Fuente

2011-01-12 20:32:01

edité mi publicación. por favor échale un vistazo. cómo lo resolverías en este caso. un simple claro: ninguno hace el trabajo ... el fondo y el borde tiene errores – matt

display: inline-block; es realmente agradable. Lástima que IE realmente no lo soporte.

Fuente

2011-01-12 20:34:57 tdammers

Para ser sincero, no trataría de evitarlo. Puede dejar el texto en el pie de página como otras personas han sugerido; pero no se le garantiza que otras partes de su html no floten ni se bloqueen de manera inapropiada. Si adoptas una política de solo borrar elementos cuando se arruinan debido a flotantes en una parte aleatoria de tu html; puedes hacer el hábito de siempre hacer eso. En su lugar, el siguiente es un ejemplo de un estilo que por lo general garantiza que otros elementos no serán flotaban inadecuadamente:

<div> 
    <div style="float:right;"></div> 
    <div style="float:right;"></div> 
    <!--Add a clear div as last sibling of any floated elements--> 
    <div style="clear:both;"></div> 
</div>

También, me gustaría utilizar un div vacío en lugar de ancho. Eso solo soy yo.

Así dibujo de su ejemplo:

 </div> <!-- post --> 

     <!-- insert empty clear div hear --> 
     <div style="clear:both;"></div> 

     <div id="sidebar">

Fuente

2011-01-12 20:40:55 Dave

elementos flotantes <br clear="both"/> de una manera mejor css?

Respuesta

Cuestiones relacionadas