¿Por qué el float de CSS no cambia el ancho del siguiente div?

Como entiendo float:left , empujará el elemento subsiguiente a su izquierda en vez de a una nueva línea.

En el siguiente ejemplo, esperaría que el segundo div comience a la derecha del primer div, pero como puede ver en el jsfiddle a continuación, aún abarca todo el ancho.

El contenido por otro lado mágicamente comienza donde se supone que debe hacerlo. ¿La regla de float solo hace flotar el contenido pero no los márgenes?

Ejemplo aquí

 .inline { float:left; } .yellow { background-color:yellow; } 
 
first line
second line
third line
floated div

EDITAR: esperaría que el código anterior se parezca a esto pero sin la necesidad explícita de usar márgenes.

Este es un comportamiento esperado del posicionamiento flotante.

Cuando un elemento flota hacia la izquierda (en su caso, el div .inline ), el siguiente contenido fluye por el lado derecho de ese elemento, los recuadros de línea se acortan PERO el ancho del bloque contenedor que se establece mediante el siguiente elemento (en su caso, el .yellow div) está reservado .

Esto está documentado en la especificación:

9.5 Flotadores

Como un flotador no está en el flujo, las cajas de bloques no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotador no existiera. Sin embargo, los cuadros de líneas actuales y posteriores creados junto al flotador se acortan según sea necesario para dejar espacio para el cuadro de margen del flotante.

Lo que significa que los elementos de nivel de bloque (como

,

, …) – que no están posicionados – ignoran el flotante, mientras que los recuadros de línea fluyen a lo largo de su costado.

Un ejemplo dado por W3C :

Superposición de flotación CSS [RE]

La caja IMG está flotando hacia la izquierda. El contenido que sigue está formateado a la derecha del flotador, comenzando en la misma línea que el flotador. Los recuadros de líneas a la derecha del flotador se acortan debido a la presencia del flotador, pero retoman su ancho “normal” (el del bloque contenedor establecido por el elemento P) después del flotador.

Por lo tanto, si le da un segundo plano al elemento .yellow , verá que abarca el contenedor y continúa a través del elemento flotante.

La solución

Desde la especificación CSS nivel 2.1 :

El cuadro de borde de una tabla, un elemento reemplazado de nivel de bloque o un elemento en el flujo normal que establece un nuevo contexto de formato de bloque (como un elemento con ‘desbordamiento’ que no sea ‘visible’) no debe superponerse al margen de cualquiera flota en el mismo contexto de formato de bloque como el elemento mismo.

Por lo tanto, si agrega una propiedad de overflow con un valor que no sea visible para el .yellow div, evita que el div se solape con el elemento flotante:

EJEMPLO AQUÍ

 .yellow { overflow: hidden; } 

La superposición tiene sentido especialmente en situaciones donde la longitud del siguiente contenido es lo suficientemente grande como para continuar normalmente después del elemento flotante.

Si estaba restringido por defecto, el contenido no continuaría bajo el elemento flotante.

También necesita flotar el div amarillo, entonces funcionará;

 .inline { float:left; } .yellow { background-color:yellow; float: left; } 

Sin embargo, solo los elementos flotantes no lo colocan automáticamente a la izquierda del siguiente elemento, por lo que necesita display: inline-block; para mostrar el siguiente div en la misma línea y display: block; para mostrar debajo

También debe dar un ancho (en porcentaje si lo desea) para ambos divs que sumen 100% o menos, incluidos los márgenes izquierdo y derecho y el relleno si se muestran en línea.

La otra cosa que podría hacer es establecer un ancho para .inline y .inline , luego darle a .yellow el mismo valor que su margen izquierdo y no flotarlo.

 .inline { float:left; width:50px; } .yellow { background-color:yellow; margin-left:50px; } 

Esto permitirá que el div .yellow llene el ancho restante.

Espero que esto ayude.

CSS:

 .inline { float:left; position:relative; width:auto } .yellow { background-color:yellow; position:relative; float:left; } 

ver violín