The strange gap between float Div and clear DIV in Internet Explorer

Container: padding: 20px; float clear

Putting a div with the clear attribute under the floating div is a common method for layout. If the floating Div and the DIV with the clear attribute are placed in a div as a container, and the outermost div is in the IE browser when it has padding, there is a strange gap between the floating Div and the DIV with the clear attribute.

If you view the examples on the right in IE and Firefox respectively, you will see that in firfox, the performance is the same as we expected, only the padding between the outer container and the div; in IE, there is a 20 PX gap between the floating Div and the DIV with the clear attribute.

Only used for demonstrationCode:

<Div style = "padding: 20px;">

Container: padding: 20px;

<Div style = "float: Left; width: 50%; Background: green; color: White;">

Float

</Div> <Div style = "float: Right; width: 50%; Background: Blue; color: White;">

Float

</Div>

The solution to this problem is to discard the top and bottom padding of the outermost Div container, which is implemented by the top and bottom margin of the internal Div. In this way, the final effect is the same in IE and Firefox.