Consulta sobre etiquetas y css

[skyspablo]

Buenas tardes, tengo una duda..

Hay veces que existe la necesidad de usar algunos estilos clear:both; o el que fuera para mantener en orden la extructura de la web.

Y se me ocurrio definir una nueva etiqueta para que haga ese trabajo.

En mi HTML pongo:

Código HTML:

<div class="lista">
        <img src="img/tdc.png"> 
        <p>Hola!</p>
        
    <clearing />
</div>
 

y en mi css uso:

Código CSS:

.lista{
    width:90%;
    margin:20px auto 0 auto; padding:15px 30px;
    background:#FFF;
}
.lista img{
    float:left;
    margin-right:30px;
}
clearing{
    clear:both;
    display:block;
}
 

Lo que hago es definir al clearing como una etiqueta y esta se comporta como quiero en el resultado final. es decir todo a la perfección.

Pero me gustaría saber si es bueno hacer eso, es decir. los estándares, las buenas practicas y blablabla.. que hablan sobre eso?

Se que existen otras alternativas para limpiar los floats pero me gustaría consultar sobre esta tecnica especifica si esta bien usarla.

Saludos!

[TahuriKiller]

No esta bien usar esa etiqueta, ya que no respeta el standard, porque no usas bootstrap?

[Daniel Ulczyk]

Iniciado por skyspablo

Pero me gustaría saber si es bueno hacer eso, es decir. los estándares, las buenas practicas y blablabla.. que hablan sobre eso?

Que para eso está World Wide Web Consortium

No es posible inventarse etiquetas de mark-up a como venga en gana; por 2 razones fundamentales:

1. Porque desafía los estándares
2. Porque el navegador posiblemente no lo interprete adecuadamente

Creo, que las razones no son excluyentes y van ambas, juntas de la mano

[pitufoweb]

Iniciado por TahuriKiller

porque no usas bootstrap?

bootstrap para hacer un simple clear?

Seria como matar una mosca a cañonazos.









Saludos

[Cotelandia]

Código CSS:

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

Esta es la solución que aparece en boilerplate. La que usas vos sería una mala practica, ya tu código quedaría más limpio aplicando una clase que creando una etiqueta más. A mi parecer :P

[Rafael]

Otra opción simple es definir un class clear

.clear {clear:both;}

Y lo pones como class adicional donde lo necesites.

<div class="lista clear">

[skyspablo]

Muchas gracias por las respuestas, entonces queda claro que no se "debe" hacer.
Aunque es divertida la posibilidad de crear tus etiquetas :)

Saludos a la comunidad!

[pzin]

Otra opción es aplicar al elemento que contiene los elementos flotados un overflow:

Código CSS:

div.contenedor {
  overflow: hidden;
}
 

Para a mayoría de los casos funcionaría perfectamente. Aunque el clearfix de Cotelandia se supone más moderno.