Overflow solve the problem of high self-adaptation after float float

Maybe when you do a Web page, you find that the elements in a block are applied to float, and the height of the box is not measured by the height of the floating object.

The height of the outer frame is not the height of the content element after the float is used in the city's list of cities in the figure:

How to solve this problem? After discovery can use overflow to solve! method is to add the following code to the parent element

Overflow:auto; Zoom:1;

Overflow:auto is a highly adaptive, zoom:1, compatible IE6, and can be resolved in a height:1% way.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
Problems after <title>float floating </title>
<style>
* {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>

&lt;body&gt;


&lt;div class= "container" &gt;


&lt;div class= "header" &gt;header&lt;/div&gt;


&lt;div class= "main" &gt;


&lt;div class= "left" &gt;


&lt;div class= "Sidepanel" &gt;


&lt;h2&gt; City Navigation &lt;/h2&gt;


&lt;ul class= "City" &gt;


&lt;li&gt; Beijing &lt;/li&gt;


&lt;li&gt; Shanghai &lt;/li&gt;


&lt;li&gt; Tianjin &lt;/li&gt;


&lt;li&gt; Nanjing &lt;/li&gt;


&lt;li&gt; Guangzhou &lt;/li&gt;


&lt;li&gt; Chongqing &lt;/li&gt;


&lt;li&gt; Jinan &lt;/li&gt;


&lt;li&gt; Hangzhou &lt;/li&gt;


&lt;li&gt; Zhengzhou &lt;/li&gt;


&lt;li&gt; Beijing &lt;/li&gt;


&lt;li&gt; Shanghai &lt;/li&gt;


&lt;li&gt; Tianjin &lt;/li&gt;


&lt;li&gt; Nanjing &lt;/li&gt;


&lt;li&gt; Guangzhou &lt;/li&gt;


&lt;li&gt; Chongqing &lt;/li&gt;


&lt;li&gt; Jinan &lt;/li&gt;


&lt;li&gt; Hangzhou &lt;/li&gt;


&lt;li&gt; Zhengzhou &lt;/li&gt;


&lt;/ul&gt;


&lt;/div&gt;


&lt;div class= "Sidepanel" &gt;


&lt;h2&gt; Popular Articles &lt;/h2&gt;


&lt;ul class= "Hotinfo" &gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan to stay &lt;font color= "#43FF73" &gt; Fingerprint &lt;/font&gt;&lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; This month 20th, the arrival of Japan must leave fingerprints &lt;/li&gt;


&lt;li&gt; this month 20th, the arrival of Japan to leave fingerprints &lt;/li&gt;


&lt;/ul&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;div class= "right" &gt; Right-hand content &lt;/div&gt;


&lt;/div&gt;


&lt;br class= "clearfloat"/&gt;&lt;!--used to clear floating elements--&gt;


&lt;div class= "Footer" &gt;footer&lt;/div&gt;


&lt;/div&gt;


&lt;/body&gt;


&lt;/html&gt;