New block formatting contexts and hasLayout elements next to floats

F m-r 5
V
F m-r 5
auto
F m-r 5
hidden
F m-r 5
table, table, table, table, table, table, table, table, table, table, table, table, table, table, table, table
F m-r 5
V, m-l 30
F m-r 5
auto, m-l 30
F m-r 5
hidden, m-l 30
F m-r 5
table, m-l 30, table, m-l 30, table, m-l 30, table, m-l 30, table, m-l 30, table, m-l 30, table, m-l 30
F m-r 5
V, m-l 70
F m-r 5
auto, m-l 70
F m-r 5
hidden, m-l 70
F m-r 5
table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70
auto, m-l 70
hidden, m-l 70
table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70, table, m-l 70

F m-l 5
V
F m-l 5
auto
F m-l 5
hidden
F m-l 5
table, table, table, table, table, table, table, table, table, table, table, table, table, table, table, table
F m-l 5
V, m-r 30
F m-l 5
auto, m-r 30
F m-l 5
hidden, m-r 30
F m-l 5
table, m-r 30, table, m-r 30, table, m-r 30, table, m-r 30, table, m-r 30, table, m-r 30, table, m-r 30
F m-l 5
V, m-r 70
F m-l 5
auto, m-r 70
F m-l 5
hidden, m-r 70
F m-l 5
table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70
auto, m-r 70
hidden, m-r 70
table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70, table, m-r 70

From CSS 2.1 section 9.5:

The border box of of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context … must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

So, CSS2 “does not define”. It means that all attempts of using this to make sort of columnar layouts are based on unspecified browsers' behavior.

CSS tests home