css - para - instalar amp en wordpress
¿Cuál es la mejor manera de borrar el estilo de CSS "flotante"? (13)
El problema es que los elementos principales no se ajustan a la altura de sus elementos secundarios flotantes. El mejor método que he encontrado es hacer float al elemento primario para forzarlo a ajustarse con las alturas de sus elementos secundarios flotantes, luego aplicar su CSS clear al siguiente elemento que realmente desea eliminar. A menudo es necesario agregar width:100% también, ya que sin flotar el padre puede cambiar inesperadamente su diseño.
Como han mencionado otros, es semánticamente mejor evitar el marcado que no está relacionado con su contenido, como un <br> o <div> con una clase de clearfix.
Estoy bastante acostumbrado a limpiar mis carrozas usando <br style="clear:both"/> pero las cosas cambian constantemente y no estoy seguro de si esta es la mejor práctica.
Hay un hack CSS (de positioneverything) disponible que le permite obtener el mismo resultado sin el div de compensación. Pero ... afirman que el truco está un poco desactualizado y en su lugar tal vez deberías mirar este truco . Pero ... después de leer 700 páginas de comentarios :) parece que puede haber algunos lugares donde el último hack no funciona.
Me gustaría evitar cualquier javascript javascript porque me gustaría que mi clearing funcione independientemente de javascript habilitado.
¿Cuál es la mejor práctica actual para borrar divs de una manera independiente del navegador?
La mejor manera es poner "overflow: auto;" en contenedor div. Está más limpio.
div.container {overflow: auto;}
más detalles en: http://www.quirksmode.org/css/clearing.html
Lo he encontrado con mayor frecuencia (incluido yo mismo), este método se usa en html:
<div class="clear"></div>
Con esto en la hoja de estilo:
.clear {clear: both;}
Prefiero usar con .clear {clear: both; } sobre .clear-fix: después de blah blah, porque cuando miras el marcado está más claro lo que está sucediendo. Solo para tu información, este es mi tutorial sobre cómo usar float y clear que escribí hace un tiempo.
Simplemente agregando overflow:auto; para el elemento padre que contiene los elementos flotantes es una solución excelente en la mayoría de los casos.
MUESTRA HTML:
<div class="container">
<div class="child">...</div>
<div class="another-child">...</div>
<div>
CSS:
.child {
float: right;
word-wrap: break-word;
}
.child img {
max-width: 100%;
height: auto; /* of course, this is default */
}
.child p {
word-wrap: break-word;
}
.container {
overflow: auto;
}
Como con cualquier otro método, hay algunos problemas con el overflow:auto; también. Para solucionarlos, aplique max-width:100%; height: auto; max-width:100%; height: auto; para imágenes, y word-wrap: break-word; para el texto contenido dentro de los elementos flotantes.
[ source ]
Sin embargo, otro es el "Flotador casi todo" por el cual se flota al padre del mismo lado que el niño flotado.
hay un poco de vudú que tiendo a usar.
<span class="clear"></span>
span.clear {
display: block;
clear: both;
width: 1px;
height: 0.001%;
font-size: 0px;
line-height: 0px;
}
Esta combinación arregla mágicamente toda una serie de problemas del navegador, y acabo de usarlo durante tanto tiempo que he olvidado qué problemas resuelve.
jQuery UI tiene algunas clases para arreglar esto también ( ui-help-clearfix hace algo).
Técnicamente <div style="clear:both;"></div> es mejor que <br style="clear:both;" /> <br style="clear:both;" /> porque un div vacío tendrá 0 altura, por lo tanto, simplemente borrando los flotadores. <br /> dejará un espacio. No veo nada de malo con el uso del método <div/> .
Actualización : en 2014, debe usar una técnica de liberación de archivos que utiliza pseudo-elementos, como el mencionado por @RodrigoManguinho. Esta es la forma moderna de limpiar carrozas. Para un método aún más actualizado, vea el micro clearfix de Nicholas Gallagher:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Respuesta Original:
Realmente no me gusta usar marcado extra semántico, así que me alejo de usar un elemento de limpieza. En lugar de solo aplicar overflow: hidden; al padre de los flotadores para limpiarlos. Funciona con navegador cruzado, no hay problema. Creo overflow: auto; también funciona
Obviamente, no funcionará si desea utilizar una propiedad de desbordamiento diferente, pero debido al error del cuadro de expansión IE6, rara vez tengo una razón para desbordar deliberadamente mis contenedores.
<br clear="all"/>
funciona bien también El beneficio de esto sobre el uso de class = "clear" es que simplemente funciona y no tiene que configurar reglas adicionales en su CSS para hacerlo.
<div class=''float_left''>
something else
<br style="clear:both;">
</div>
este br no dejará un espacio.
.clear-fix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear-fix
{
zoom: 1;
}
<div class="clear-fix">
<div class="left">Some Div With Float</div>
<div class="left">Another Div With Float</div>
</div>
En mi opinión, esta es la mejor manera. No necesita elementos DOM adicionales ni un uso incorrecto del desbordamiento ni de ningún corte.
.floatWrapper {
overflow:hidden;
width:100%;
height:100%;
}
.floatLeft {
float:left;
}
<div class="floatWrapper">
<div class="floatLeft">
Hello World!
</div>
<div class="floatLeft">
Whazzzup!
</div>
</div>