IE7-/Win: Problems with float + clear on the same element
1.
b1. float
one
two
b2. float + clear, blah blah blah blah blah blah blah
one
b3. not float
one
two
three
four
five
1a.
b1. float
one
two
b2. float + clear, blah blah blah blah blah blah blah
one
b3. float
one
two
three
four
five
2.
b1. float
one
two
b2. not float
b3. float + clear, blah blah blah blah blah blah blah
one
b4. not float
one
two
three
four
five
2a.
b1. float
one
two
b2. not float
b3. float + clear, blah blah blah blah blah blah blah
one
b4. float
one
two
three
four
five
3.
b1. float
one
two
b2. float, blah blah blah blah blah blah blah
one
b3. not float
one
two
three
four
five
4.
b1. float
one
two
b2. not float
b3. float
b4. float + clear, blah blah blah blah blah blah blah
one
b5. not float
one
two
three
four
five
5.
b1. float
one
two
b2. float + clear, blah blah blah blah blah blah blah
one
b3. not float
one
two
three
four
five
In the above test cases there are boxes in a gray container, called b1, b2, b3, ... according to their source order.
All the boxes (and the container) have hasLayout (MS.)
The combination float+clear triggers several anomalies in IE7-/Win (the "3px gap" and the "MS float model" are also in effect here.)
- Case 1: A float is immediately followed by a float+clear The float+clear is "ignored" by the following boxes, which overlap its content.
1a: If the following box is a float it goes higher than the float+clear.
- Case 2: There is an in-flow (not floated) box between the float and the float+clear. Now the float+clear is seen by following boxes.
But if the following box is not floated (as in the test case) then there is another problem: the float+clear seems to clear too much. More precisely, the subsequent box doesn't go higher than the float+clear (it should vertically follow the previous in-flow box.)
2a: If the box following the float+clear is a float, then the added in-flow box solves the problem of case 1a.
- Case 3: A problem similar to that of case 2 happens is a simpler case. A float goes below another because it doesn't fit horizontally aside the first one. A following in-flow box doesn't go higher than the second float. This can also be seen as a variant of case 1, with no clear on the second float, which drops under the first one being wider than the available space.
- Case 4: Like case 2, with the addition of a float just before the float+clear: This reproduces the condition where the float+clear is "ignored", allowing the following in-flow box to go as high as it should (could be useful to solve the problem of case 2.)
- Case 5: Like case 3, with the addition of clear on the second float. This reproduces case 1, allowing the following in-flow box to go as high as it should.
In the following test cases a float and a float+clear are simply followed by inline text. No big problems here in IE7- except some overlapping between the in-flow text and the second float. In some circumstances this also occurs in other browsers inline content overlapping an earlier float in Gecko.
6.
b1. float
one
b2. float + clear, blah blah blah blah blah blah blah
one
Sempre caro mi fu quest’ermo colle, e questa siepe, che da tanta parte de l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato spazio di là da quella, e sovrumani silenzi, e profondissima quiete io nel pensier mi fingo, ove per poco il cor non si spaura. E come il vento odo stormir tra queste piante, io quello infinito silenzio a questa voce vo comparando: e mi sovvien l’eterno, e le morte stagioni, e la presente e viva, e ’l suon di lei. Così tra questa infinità s’annega il pensier mio: e ’l naufragar m’è dolce in questo mare.
7.
b1. float
one
b2. float + clear
one
Sempre caro mi fu quest’ermo colle, e questa siepe, che da tanta parte de l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato spazio di là da quella, e sovrumani silenzi, e profondissima quiete io nel pensier mi fingo, ove per poco il cor non si spaura. E come il vento odo stormir tra queste piante, io quello infinito silenzio a questa voce vo comparando: e mi sovvien l’eterno, e le morte stagioni, e la presente e viva, e ’l suon di lei. Così tra questa infinità s’annega il pensier mio: e ’l naufragar m’è dolce in questo mare.
Other problems in IE7-/Win caused by float and clear on the same element
CSS tests home