CSS2.0 box model hierarchy plane schematic diagram and 3D schematic diagram

CSS2.0 box model level plane schematic diagram and 3D schematic diagram 3 pixel problem and solution when floating container is used, the 3px voids are generated under IE6, which is interesting when the right container is not set to the height 3px is inside the right container, and when the height is set, it runs to the left side of the container, So for the layout accuracy requirements, please refer to Example 29, 31 solution above container floating, the bottom of the container followed by floating, resulting in page confusion as the above example of the footer must be a separate line, but when the sidebar float, the content of the height is less than the height of sidebar, Footer also followed the float to the right side of the sidebar, causing page confusion. The solution is to insert a container between maincontent and footer and set the style clear:both; height:0; font-size:1px; line-height:0px Clear:both Clear, you can make the page normal when child elements float and unknown height, how to make the parent container to adapt to the height of child elements. This situation can be added to the parent window with Overflow:auto;zoom:1, the two style properties, the Overflow:auto of the parent container from the height of the inner container, zoom:1 the CSS HACK to be used for compatible IE6. Zoom:1 the verification of the Consortium, which is also a pity, fortunately, ie support <!--[if ie]> this writing, you can specifically for IE to write a separate style, so you can write this property in the page of the <!--[if ie]>, This should be validated by the relative positioning and absolute positioning planning page, many times need to use relative positioning or absolute positioning, which has a skill, after mastering some places do not need to be cumbersome JS. That is, when the parent container uses relative positioning, the child element uses absolute positioning, and the position is relative to the parent element. If the parent element is not positioned, then the absolute positioning of the child element is relative to the browser IE6 double margin bug when there is more than one continuous float on the page, such as the list of icons on this page is left floating, when the left margin value of Li is set, the left side is doubled. If the outer margin is set to 10px and the left side is 20px, the solution is to add a display:inline to the floating element, which avoids double margin bugs