First, let's look at the comparison of an example:
This is the effect before floating is cleared. We can see that the height of the parent element of the three floating elements column1, column2, and column3 is not extended.
This is what we want to achieve, which can be achieved through the following three methods.
Method 1:
Add an element after the last floating element of the floating layer to clear the floating. This is the simplest and most direct method. The only drawback is that the document stream structure is changed to a certain extent.
Html code:
| The code is as follows: | Copy code |
| <Div id = "demo"> <div id = "c1" class = "column"> column1 </div> <div id = "c2" class = "column"> column2 </div> <div id = "c3" class = "column"> column3 </div> <div class = "clear"> </div> |
|
Css code:
| The code is as follows: | Copy code |
|
|
Method 2:
This method depends on the declaration of the following two types of documents:
| The code is as follows: | Copy code |
| <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> |
|
Css code:
| The code is as follows: | Copy code |
# Demo {border: 1px black dashed ;}. column {float: left; padding: 10px; margin: 10px; width: 200px;} # c1 {border: 1px red dashed;} # c2 {border: 1px green dashed ;} # c3 {border: 1px blue dashed;} [xmlns] # demo {overflow: auto;}/* For IE7 + and non-IE */* html # demo {height: 1%;}/* IE only */ |
|
Method 3:
Non-IE browsers use pseudo classes: after, and IE browser uses its special attribute zoom.
Css code:
| The code is as follows: | Copy code |
# Demo {border: 1px black dashed; zoom: 1;/* IE only */} |
|
Overflow solves the problem of high self-adaptability after float
We found that we can use overflow to solve this problem! Add the following code to the parent element:
Overflow: auto; zoom: 1;
"Overflow: auto;" is to make the height adaptive, "zoom: 1;" is to be compatible with IE6, you can also use "height: 1%;" to solve the problem.
The complete code is as follows:
| The code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Title> float issues </title> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <Style type = "text/css"> * {Padding: 0; margin: 0 ;} Body {font-size: 12px; line-height: 150% ;} Ul {list-style: none ;} . Container {width: 700px; margin: 0 auto ;} . Header,. footer {height: 60px; background: #99CC66; margin-bottom: 6px; font-size: 18px; font-weight: bold ;} . Main {} . Left {float: left; width: 200px ;} . Sidepanel {border: 1px solid # CC6600; margin-bottom: 8px ;} . Sidepanel h2 {font-size: 12px; background: # CC6600; height: 24px; line-height: 24px; text-indent: 20px; color: # fff ;} . City {padding: 6px 0px; overflow: auto; zoom: 1 ;} . City li {float: left; width: 35px; text-align: center ;} . Right {margin-left: 200px; background: # CCCC66; height: 240px ;} . Hotinfo {padding: 6px ;} . Clearfloat {clear: both; height: 0; font-size: 1px; line-height: 0px ;} </Style> </Head> <Body> <Div class = "container"> <Div class = "header"> header </div> <Div class = "main"> <Div class = "left"> <Div class = "sidepanel"> <H2> City navigation <Ul class = "city"> <Li> Beijing </li> <Li> Shanghai </li> <Li> Tianjin </li> <Li> Nanjing </li> <Li> Guangzhou </li> <Li> Chongqing </li> <Li> Jinan </li> <Li> Hangzhou </li> <Li> Zhengzhou </li> <Li> Beijing </li> <Li> Shanghai </li> <Li> Tianjin </li> <Li> Nanjing </li> <Li> Guangzhou </li> <Li> Chongqing </li> <Li> Jinan </li> <Li> Hangzhou </li> <Li> Zhengzhou </li> </Ul> </Div> <Div class = "sidepanel"> <H2> popular articles <Ul class = "hotinfo"> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> <font color = "#43FF73"> fingerprints </font> </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> <Li> fingerprints are required for entry from January 1, 20th day of this month </li> </Ul> </Div> </Div> <Div class = "right"> content on the right </div> </Div> <Br class = "clearfloat"> <! -- Used to clear floating elements --> <Div class = "footer"> footer </div> </Div> </Body> </Html> |
|
Instance reference http://www.111cn.net/js_a/87/43100.htm
Note the following:
1. Floating elements are automatically set to block-level elements, which is equivalent to setting the display: block for the elements (block-level elements can be set to width and height, while intra-row elements cannot ).
2. Non-floating element display issues behind floating elements.
3. Multiple elements with consistent floating direction are arranged in streaming mode. Pay attention to the height of the floating element.
4. The height of all child elements is adaptive to the floating element.
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
