The content moves out of the document stream after the container's child elements are set to float!
Workaround:
1. Give a overflow:hidden; as a closed floating element
2. Set the UL a fixed height
The following are some of the solutions related to this, refer to the article "Those who have been cleared together over the years"
<styletype= "Text/css">. Warp{width:80%;Border:1px solid #000000;}. Main{width:70%;Height:300px;Background-color:#999933;float: Left;}. Side{width:22%;Height:300px;Background-color:#66CC33;float: Right;}#footer{width:80%;Height:80px;Background-color:#0000FF;}</style></Head><Body><Divclass= "Warp"><H2>1) Add additional tags</H2><Divclass= "Main">Main</Div><Divclass= "side">Side</Div><div style= "Clear:both;" ></div></Div><DivID= "Footer"></Div></Body>
No red code is added before:
After adding the red code:
2:<BR clear= "All"/>
Put the code like above in the red Code, the same effect
BR has clear= "all | Left | Right | None "Property
3: Parent element set Overflow:hidden; (Haslayout in IE6, for example Zoom:1)
<Body><Divclass= "Warp"style= "overflow:hidden;*zoom:1;"><H2>3) parent Element settings Overflow</H2><Divclass= "Main">Main</Div><Divclass= "side">Side</Div></Div><DivID= "Footer"></Div></Body>
The rest of the code, like the first example, has the same effect.
Cons: When content increases, it is easy to cause the content to be hidden, and the elements that need to overflow cannot be displayed. 04 Popo found Overflow:hidden will cause middle key to fail
4) parent Element Set Overflow:auto property
Same IE6 need to trigger haslayout
Disadvantage: After multiple nesting, Firefox will cause the content to be selected in some cases, ie in the mouseover caused by the width changes will appear when the outermost module has scroll bar, Firefox earlier version will not cause focus, etc.
5) parent element also set floating
For the above example, let footer clear floating clear:both;
Disadvantage: The layout of the elements adjacent to the parent element is affected and cannot be floated to the body, not recommended
6) parent element Settings display:table
Cons: Box model properties have changed, resulting in a series of problems, not worth the candle, not recommended to use
7) Use: After pseudo element
Because IE6-7 does not support: After, use zoom:1 to trigger Haslayout
The original code is as follows:
<style type= "Text/css" > . Clearfix:after { content: "."; display:block; height:0; clear:both; visibility : Hidden; } . Clearfix {display:inline-block;} /* for IE/MAC */ </style> <!--[if ie]> <style type= "Text/css" >. clearfix {zoom:1;/* triggers haslay Out */ display:block;/* resets display for Ie/win */} </style> <![ Endif]--> in view of the IE/MAC market share is very low, we directly ignore, the final streamlined code is as follows:. clearfix:after {content: "."; display:block; height:0; visibility:hidden; clear:both;}
. clearfix {*zoom:1;}
Pros: The structure and semantics are completely correct and the code is centered
Cons: Improper reuse will result in increased code volume
Question: FF in the UL under the Li set to the left floating UL background color is not?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
