實驗代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 1、在IE、FF中測試，只在IE出現(xiàn)文字溢出現(xiàn)象。
說明：注釋造成文字溢出是IE的BUG。
2、去除<div style="float:left"></div> 中的“float:left;”，你會發(fā)現(xiàn)多出來的“豬”字不見了，頁面正常顯示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div></div>
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 同樣去除 <div style="float:right;width:400px">中的“float:right;”，多余的“豬”字也同樣消失，頁面正常顯示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與區(qū)塊的浮動有關。
3、將注釋轉移到<div style="float:left"></div>前面，多余的“豬”字消失，頁面正常顯示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<!-- -->
<div style="float:left"></div>
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 將注釋轉移到<div style="float:right;width:400px">↓這就是多出來的那只豬</div>下面，多余的“豬”字也同樣消失，頁面正常顯示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
<!-- -->
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與其位置有關。（可與第2點結合理解）
4、去除<div style="float:right;width:400px">中的“width:400px”，多余的“豬”字消失，頁面正常顯示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與文字區(qū)塊的固定寬度有關（無論是絕對值還是相對值）。
5、增加注釋的條數(shù)：當1條注釋時，則多出來1個字；2條注釋時，則多出來3個字；3條注釋時，則多出來5個字……
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 我們會從上面的規(guī)律中得到這樣一個公式：溢出文字的字數(shù)=注釋的條數(shù)*2-1，這里的字數(shù)在中文或英文數(shù)字時都成立。
當溢出的文字字數(shù)大于文本的字數(shù)時，文字區(qū)塊將會消失。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 說明：溢出的字數(shù)與注釋的條數(shù)有關。
由1和2的測試得知：注釋不要放置于2個浮動的區(qū)塊之間。
解決方法：
1、不放置注釋。最簡單、最快捷的解決方法，嘿嘿……
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 2、注釋不要放置于2個浮動的區(qū)塊之間。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<!-- -->
<div style="float:left"></div>
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 3、將文字區(qū)塊包含在新的<div></div>之間，如：<div style="float:right;width:400px"><div>↓這就是多出來的那只豬</div></div>。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px"><div>↓這就是多出來的那只豬</div></div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 4、去除文字區(qū)塊的固定寬度，與3有相似之處。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;">↓這就是多出來的那只豬</div>
</div>
</body>
</html>
提示：您可以先修改部分代碼再運行 可能以上的分析和解決方法有不到位或者不準確的地方，歡迎討論指正
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試