Cuando una caja de línea contiene una caja a nivel de bloque de flujo de entrada, la caja de línea (y sus ancestros en línea dentro de la misma caja de línea) se rompen alrededor de la caja a nivel de bloque (y cualquier hermano de nivel de bloque que sea consecutivo o separado solo por espacios en blanco plegables y/o elementos de falta de flujo), dividiendo el cuadro en línea en dos cuadros (incluso si alguno de los lados está vacío), uno a cada lado del bloque caja (s) de nivel Los recuadros de línea antes del descanso y después del descanso están encerrados en recuadros de bloques anónimos, y el recuadro de nivel de bloque se convierte en un hermano de esos recuadros anónimos. Cuando una casilla en línea de este tipo se ve afectada por el posicionamiento relativo, cualquier traducción resultante también afecta al cuadro de nivel de bloque contenido en la casilla en línea.
Este modelo se aplicaría en el siguiente ejemplo si las siguientes reglas:
p { display: inline }
span { display: block }
Se han usado con este documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
El elemento P contiene un trozo (C1) de texto anónimo seguido de un elemento de nivel de bloque seguido de otro fragmento (C2) de texto anónimo. Los cuadros resultantes serían un cuadro de bloque que representa el CUERPO, que contiene un cuadro de bloque anónimo alrededor de C1, el cuadro de bloque SPAN y otro cuadro de bloque anónimo alrededor de C2.
Las propiedades de las carpetas anónimas se heredan de la casilla no anónima adjunta (por ejemplo, en el ejemplo justo debajo del encabezado de la subsección "Cuadros de bloque anónimos", el de DIV). Las propiedades no heredadas tienen su valor inicial. Por ejemplo, la fuente de la casilla anónima se hereda de DIV, pero los márgenes serán 0.
Las propiedades establecidas en los elementos que provocan que se generen cuadros de bloque anónimos aún se aplican a las casillas y el contenido de ese elemento. Por ejemplo, si se ha establecido un borde en el elemento P en el ejemplo anterior, el borde se dibujará alrededor de C1 (abierto al final de la línea) y C2 (abierto al comienzo de la línea).
Algunos agentes de usuario han implementado bordes en líneas que contienen bloques de otras maneras, por ejemplo, envolviendo dichos bloques anidados dentro de "casillas de líneas anónimas" y dibujando así bordes en línea alrededor de dichos cuadros. Como CSS1 y CSS2 no definieron este comportamiento, los agentes de usuario solo de CSS1 y CSS2 pueden implementar este modelo alternativo y aún reclamar conformidad con esta parte de CSS 2.1. Esto no se aplica a los UA desarrollados después de que se publicó esta especificación.
Haga de eso lo que quiera. Claramente, el comportamiento se especifica en CSS, aunque no está claro si cubre todos los casos o si se implementa de manera consistente en todos los navegadores.
Me alegra que html5 considere que este código sea válido, pero válido no es el final de toda la web. The Googles usa un código que parece una sopa de etiqueta horriblemente rota, pero funciona. – JKirchartz