display:table or display:inline-table
IE Win:
display:table
is not supported. In order to establish a new block formatting context, elements must gain ‘haslayout’ — see On having layout. {zoom:1}
is used here.div, in flow, no new block formatting context
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
div, in flow, new block formatting context with display:table
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
tests — new block formatting context adjacent to float: using the overflow property
back to introduction
The same test, but using
float:left
instead of float:right
.
float block
div, in flow, no new block formatting context
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
div, in flow, new block formatting context with overflow:hidden
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
div, in flow, new block formatting context with overflow:auto
paragraph.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
paragraph,
overflow:hidden
. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
paragraph,
overflow:auto
. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat