The box pattern defined by W3C is as follows:
width and height define the width and height of the Content part, and the width of the padding border margin is added to the outside in turn. The background will fill the padding and content parts.
However, due to browser design issues, the display effects of different browsers will be somewhat different.
The problem of doubling the left and right margins
When the box is float, the left and right margins of the box in IE6 will double.
The left margin of the left inner is obviously larger than 5px.
At this time, define the display attribute of inner as inline.
The problem with automatic height calculation of the outer box
According to W3C definition, the outer box without float attribute will not automatically calculate the height. To calculate the height, clear: both must be added to the last box of the inner layer.
Opera, netscape, mozilla, etc. will not calculate the outer box height, but Microsoft ie6 will automatically calculate the outer box height.
The above code has a black background in IE, but the upper and lower margins are not calculated correctly. After adding a div containing the clear:both attribute below inner2, the margin can be calculated correctly. But there is still no black background in Firefox. The usual solution is to define the height of the clear:both div, or insert a full-width space, so additional height must be added. A better solution online is to add the overflow attribute to the outer div and use clear:both at the same time, so that no additional height is added.
Therefore, the overflow attribute must be defined in the outer layer of css, and the clear attribute must be added to the inner layer at the end.
Centering problem
You need to define the width of the element and define the horizontal margin. If your layout is contained in a layer (container), like this:
You can define it like this to center it horizontally:
#wrap {
width:760px; /* Modify to the width of your layer*/
margin:0 auto;
}