significado - section html5 ejemplos

¿Cuál es el beneficio del diseño sin mesa si necesita limpiar bloques en todas partes?

Question

Entiendo que el objetivo de avanzar hacia etiquetas <div> desde <table> tiene sentido ya que es más semántico. Sin embargo, no entiendo el beneficio obtenido si aún necesita un bloque de borrado para hacer que los diseños basados ​​en columnas funcionen. Por ejemplo:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

La etiqueta extraña de la etiqueta se utiliza estrictamente para describir el estilo, y es necesaria para que el diseño funcione. ¿Esto no arruina todos los beneficios obtenidos al eliminar mesas?

Answer 1

Como muestra la respuesta de Annakata, no necesitas esos bloques de limpieza. Pero aparte de esto, una de las ventajas de evitar tablas es que la página se puede representar de forma progresiva. Una tabla solo se puede representar cuando se haya analizado toda la tabla, incluidos todos sus contenidos, lo que puede llevar un tiempo si tiene una página grande y una conexión lenta. Los divs se pueden representar de inmediato, lo que significa que es posible que pueda presentar algo que el usuario pueda usar mucho antes que con las tablas.

Por supuesto, esto es solo una pequeña ventaja de bonificación, no lo es, y no debería ser la razón para evitar tablas (para datos no tabulares)

Answer 2

Si está mostrando datos tabulares, todavía tiene más sentido usar tablas que muchos divs flotantes. Use las herramientas que ha sabiamente: no use ciegamente CSS, donde las tablas son la mejor opción.

Answer 3

De ningún modo. Hay MUCHOS de otros beneficios para evitar el uso de tablas.

• Tablas en lugar de DIV
• DIVs vs. TABLES una refutación por favor
• DIV vs. Tablas o CSS vs. Ser estúpido

Answer 4

Entiendo que el objetivo de avanzar hacia etiquetas <div> desde <table> tiene sentido ya que es más semántico.

En realidad, es exactamente lo opuesto: pasar de <table> a <div> hace que su HTML sea menos semántico. De hecho, el objetivo de los elementos <div> (y <span> ) es no tener semántica.

Siempre me molesta, cuando veo un bosque de <div> s descrito como "HTML semántico". ¡No, no es! ¡Eso es * un- * HTML semántico! Especialmente si contiene una gran cantidad de <div class=''float-left''> , <div id=''bottom''> y mis favoritos personales <div class=''paragraph''> y <span class=''emphasis''> .

No me malinterpreten, el uso de <div> s no semánticos es ciertamente mejor que el uso de -semántica <table> s, pero sería aún mejor utilizar los elementos semánticamente correctos , aunque en muchos casos el problema es que HTML no lo hace ofrezco alguno. En su fragmento, por ejemplo, utiliza el elemento <address> , pero de acuerdo con la especificación , ¡este elemento no está destinado a marcar direcciones! Es solo para marcar la dirección del autor de la página , IOW es completamente inútil.

El ejemplo que ha publicado le falta un montón de contexto, por lo que es difícil de decir, pero en realidad parece que desea mostrar datos tabulares o jerárquicos, en cuyo caso <table> o <ul> s podrían ser un mejor elección.

Totalmente relacionado con su pregunta: es posible que desee echar un vistazo a los microformatos hCard y XOXO .

Answer 5

¿Qué pasaría si te dijera que no necesitas un bloque de limpieza?

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

Answer 6

Personalmente utilizo el hack clearfix para mis necesidades de limpieza.

/* Clearfix */
#content:after,
.box:after {
  content:''.'';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

Fíjate que simplemente clearfix los selectores en lugar de agregar la clase clearfix a todo. Funciona realmente bien. El único problema es que la propiedad de zoom es específica de IE y no valida, pero no hay efectos secundarios como a veces puede haber con otras propiedades, como overflow: auto .

He estado usando esto en sitios web profesionales durante 5 años sin problemas.