Efecto del desbordamiento y los estilos claros con flotadores -- ss campo con css-float camp Relacionados El problema

Effect of overflow and clear styles with floats


3
vote

problema

Español

Soy bastante inteligente de CSS, pero estoy viendo un comportamiento extraño / claro. Lo tengo trabajando, pero no estoy totalmente seguro de por qué y estoy buscando una explicación.

jsfiddle: http://jsfiddle.net/ismyrnow/jv5n6/

captura de pantalla de jsfiddle

Tengo un diseño de 2 columnas: barra lateral y contenido, donde la barra lateral está flotando, pero el contenido no es; El DIV del contenido tiene un margen izquierdo aplicado a él.

Si uso clear:both En cualquier elemento en el contenido DIV, el elemento cae inesperadamente por debajo de la altura del div (inesperadamente porque la barra lateral flotada no está afectando directamente el posicionamiento de los elementos dentro de la área de contenido).

Lo que es aún más inesperado, es que cuando agrego overflow:auto al contenido DIV, el problema se desaparece. (Encontré la solución aquí )

¿Puede alguien explicar:

  1. ¿Por qué clear:both causaría que un elemento borrará un elemento flotado que no afecte directamente su posición?

  2. ¿Por qué overflow:auto en el elemento principal corrige el problema.

Original en ingles

I'm pretty CSS-savvy, but I'm seeing some odd float/clear behavior. I have it working, but I'm not entirely sure why and am looking for an explanation.

JSFiddle: http://jsfiddle.net/ismyrnow/JV5n6/

Screenshot from JSFiddle

I have a 2 column layout - sidebar and content - where the sidebar is floated but the content is not; the content div has a left margin applied to it.

If I use clear:both on any elements in the content div, the element unexpectedly drops below the height of the sidebar div (unexpectedly because the floated sidebar isn't directly affecting the positioning of items inside the content area).

What is even more unexpected, is that when I add overflow:auto to the content div, the problem goes away. (I found the solution here)

Can someone explain:

  1. Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.

  2. Why overflow:auto on the parent element fixes the issue.

     

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 
  1. ¿Por qué clear:both provocaría que un elemento borrará un elemento flotado que no afecte directamente su posición?

    Puede que no esté afectando directamente su posición, pero todavía lo habría afectado, porque en ausencia de cualquier autorización, los flotadores normalmente no están restringidos en la forma en que afectan el resto del diseño de flujo normal, incluso una vez que son sacado de él, ni siquiera por elementos de los padres diferentes, como su elemento de contenido visible1 con el margen izquierdo en este caso. La única restricción real es que los elementos flotantes solo pueden afectar los elementos que se trasladan en el orden del árbol de documentos, es decir, elementos que están siguiendo a los hermanos (no precedentes), así como sus descendientes.

    El contenido que está justo por encima del elemento dentro de su columna de contenido no es lo suficientemente alto como para empujarlo debajo del elemento flotado. Si elimina esa declaración, verá que ambos .c elementos se posicionan junto a su flotadores respectivos también .

    Cuando agregue clear , lo que sucede es que obliga al elemento de limpieza que se colocará debajo del flotador independientemente de donde termine horizontalmente.

  2. ¿Por qué overflow:auto en el elemento principal corrige el problema?

    Esto se debe a que cualquier caja de bloques con overflow Otro de visible6 genera contextos de formato de bloque . Una propiedad de un contexto de formato de bloque es que las cajas flotantes afuera nunca pueden interactuar con ninguna caja en su interior, y viceversa.

    Una vez que haga que el elemento de contenido establezca su propio contexto de formato de bloque, su elemento flotante ya no puede afectar ningún elemento dentro del elemento de contenido (consulte la sección en la sección float PROPIEDAD ), y El elemento de limpieza dentro de él es ya no puede eliminar los flotadores que están fuera del elemento de contenido (consulte el < Código> clear propiedad ).

 
  1. Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.

    It may not be directly affecting its position, but it would still have affected it anyway, because in the absence of any clearance, floats aren't normally restricted in how they affect the rest of the normal flow layout even once they are taken out of it, not even by different parent elements such as your .b content element with the left margin in this case. The only real restriction is that floating elements may only affect elements that come after them in document tree order, i.e. elements that are following (not preceding) siblings, as well as their descendants.

    The content that's just above the element within your content column isn't tall enough to push it beneath the floated element. If you remove that declaration, you would see that both .c elements become positioned next to their respective floats as well.

    When you add clear, what happens is that it forces the clearing element to be positioned beneath the float regardless of where it ends up horizontally.

  2. Why overflow:auto on the parent element fixes the issue.

    This is because any block boxes with overflow other than visible generate block formatting contexts. A property of a block formatting context is that floating boxes outside it can never interact with any boxes inside it, and vice versa.

    Once you cause the content element to establish its own block formatting context, your floating element is no longer able to affect any elements inside the content element (see the section on the float property), and the clearing element inside it is no longer able to clear any floats that are outside the content element (see the clear property).

 
 
     
     
1
 
vote

para clear:both

La propiedad CSS transparente especifica si un elemento puede estar al lado de los elementos flotantes que lo preceden o deben moverse hacia abajo (borrados) debajo de ellos.

La propiedad transparente se aplica a elementos flotantes y no flotantes.

Cuando se aplica a bloques no flotantes, mueve el borde del borde del elemento hacia abajo hasta que esté por debajo del borde del margen de todos los flotadores relevantes. Este movimiento (cuando sucede) hace que la colapsación de margen no ocurra.

Cuando se aplica a elementos flotantes, mueve el borde del margen del elemento debajo del borde de margen de todos los flotadores relevantes. Esto afecta la posición de los flotadores posteriores, ya que los flotadores posteriores no pueden posicionarse más altos que los anteriores.

Los flotadores que son relevantes para ser borrados son los flotadores anteriores dentro del mismo contexto de formato de bloque.

Espero que esto aclare la duda. Este es el enlace desde donde encontré la información anterior .....

https://developer.mozilla.org/en-us/ DOCS / WEB / CSS / CLEAR

 

For clear:both

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

I hope this will clear your doubt. This is the link from where i found the above info.....

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

 
 
     
     

Relacionados problema

1  CSS 100% dives lado a lado, flujo horizontal  ( Css 100 divs side by side horizontal flow ) 
Estoy tratando de hacer un paso a paso (4 pasos en total). Pensé en tener una especie de configuración de deslizador horizontal. He creado un contenedor con...

1  El cromo no calcula el ancho correctamente para el bloque con el desbordamiento: margen oculto, izquierdo y elemento flotado a la izquierda  ( Chrome not calculating width correctly for block with overflow hidden left mar ) 
Me he encontrado con un error en Chrome en la siguiente situación: Dos elementos de bloque (los llamaremos #rail y #well ) #rail está flotando a la ...

-1  First DIV FLOAT: Desbordamiento de segunda división IZQUIERDA: Oculto y margen superior: 3000px inválido  ( First div floatleft second div overflowhidden and margin top3000px invalid ) 
First DIV FLOAT: Desbordamiento de segunda división IZQUIERDA: Oculto y margen: Top: 3000px inválido. DIV2 SET margin-top:3000px NO MARGIN-TOP!? ...

0  Problema de flotación sensible  ( Responsive float issue ) 
Estoy desarrollando un sitio web receptivo donde voy de tres, dos y, por último, a una columna por fila. El problema que tengo es que la longitud del texto ...

3  Problema con sidedenotes flotantes en CSS  ( Problem with floating sidenotes in css ) 
Estoy probando sidedenotes flotantes que cortan en el cuerpo principal de un texto. Puedes ver lo que tengo hasta ahora aquí y (como un jsfiddle) aquí . ...

1  Flotando demasiado lejos  ( Floating too far right ) 
Tengo una aplicación web de administración de registros que muestra un registro maestro en una pantalla y Ajaxes editores diseñados dinámicamente en un DIV de...

3  Dos diveces flotantes a la izquierda y la derecha: ¿Cómo puedo mantenerlos en el mismo nivel cuando una página cambia de tamaño?  ( Two divs floating left and right how can i keep them on the same level when a p ) 
Dado el siguiente HTML: <!DOCTYPE html> <html> <body> <div id="container"> <div id="left" style="float: left; background-color: #777; width: 500px;">...

0  ¿Por qué el texto o las imágenes no se colocan detrás de un elemento flotante?  ( Why the text or images are not placed behind a floating element ) 
¿Por qué el texto o las imágenes no se colocan detrás de un elemento flotante? En este enlace: http://codepen.io/anon/pen/lvwmvp , puedes ver el ejemplo. ...

2  Cómo romper divisiones juntos verticalmente en CSS como Pinterest tienen  ( How to snap divs together vertically in css like pinterest have ) 
Tengo 4 diveces flotados a la izquierda, y puedo ver 2 en fila. .box { width: 50%; border: 1px solid red; float: left; box-sizing: border-box; } ...

4  ¿Cómo evitar los divos claros vacíos?  ( How to avoid empty clear divs ) 
He estado usando muchos flotadores recientemente como este: <div id="buttons"> <input type="button" id="btn1" value="Button One"> <input type="button" ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos