The parent div cannot be opened when the sub-div is set to float ., Div settings floating support

The parent div cannot be opened when the sub-div is set to float ., Div settings floating support

<Div class = "mainBox"> <div class = "leftBox"> </div> <div class = "rightBox"> </div> <div class = "clear"> </div>

 

Note: After leftBox and rightBox are set to float, they are out of the normal Document Stream and no longer occupy the positions in the original document. Therefore, the parent div cannot be opened.

Solution:

① You can set the parent div height to PX to make the leftBox and rightBox on the page look "as if" still in the original position. ② define a class selector and set clear: both; clear floating. To solve the div height problem in IE6, you can add the attribute height: 0; overflow: hidden;

. MainBox {width: 960px; margin: 0 auto; background-color: # CFF; overflow: visible ;}. leftBox {width: 740px; height: 300px; background-color: # C9F; float: left ;}. rightBox {width: 210px; height: 300px; background-color: # FCF; float: right ;}. clear {clear: both; height: 0;/* solves IE6 height problems */overflow: hidden ;}

/* If the parent element does not set the height and the child element has a height, the parent element will be opened * // * if the child element is set to float, it will be out of the Document Stream, the parent element is not supported * // *. Therefore, the child element is set to floating, and the parent element needs to be set to height */