CSS2.0 box model hierarchy plane diagram and 3D diagram
3 pixel problem and solution
When using a float container, a 3px gap will be generated under IE6. What is interesting is that when the right container has no height set, 3px is inside the right container. When the height is set, it goes to the left side of the container. Therefore, if you have high requirements for layout accuracy, please refer to the solutions in Examples 29 and 31.
After the upper container floats, the lower container floats, causing page confusion
For example, the footer in the above example must occupy a separate line, but when the sidebar floats, the height of the content is smaller than the height of the sidebar. When the height is increased, the footer also floats to the right side of the sidebar, causing page confusion. The solution is to insert a container between maincontent and footer, set the style clear:both; height:0; font-size: 1px; line-height: 0px; clear it with clear:both, and the page will be normal.
When the child element is floating and the height is unknown, how to make the parent container adapt to the height of the child element?
In this case, you can add the two style attributes overflow:auto;zoom:1; to the parent window. overflow:auto; allows the parent container to adapt to the height of the internal container. zoom:1; is for CSS HACK used for compatibility with IE6. zoom:1; It is a pity that it cannot pass the W3C verification. Fortunately, IE supports the writing method of
