如果不設置高度，而且設置overflow：flow的話里面的字體溢出無法顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局編程挑戰</title>

*{margin:0;padding:0}

#wrap{width:960px;margin:0px auto;}

#hedder{width:100%;background:#0F0;}

#mainbody{width:100%;background:#F00; overflow:hidden;}

.left{width:800px; background:#96C; float:left;}

.right{width:140px; background:#0FF; float:right}

#fotter{width:100%;background:#666;}

</style>

</head>

<body>

<div id="hedder">hadder</div>

? ? <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaasdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsddddddddddddddddddddddddddddddd</div>

? ? ? ? <div class="right">sdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsddddddddddddddddddddddddddddddd</div>

? ??

? ? </div>

? ??

<div id="fotter">fotter</div>

</div>

</body>

</html>

qq_未來一場夢_0

2016-07-25

源自：網頁布局基礎 3-5

關注問題我要回答

947

操作

收起

4 回答

盯叮町玎仃回答被采納 +3 積分
2016-07-28

<!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=utf-8"?/>

<title>混合布局編程挑戰</title>

<style?type="text/css">

*{margin:0;padding:0}

#wrap{width:960px;margin:0px?auto;}

#hedder{width:100%;background:#0F0;}

#mainbody{width:100%;background:#F00;?overflow:hidden;}

.left{width:800px;?background:#96C;?float:left;word-wrap:?break-word;word-break:?break-all;}

.right{width:140px;?background:#0FF;?float:right;word-wrap:?break-word;word-break:?break-all;}

#fotter{width:100%;background:#666;}

</style>


</head>


<body>

<div?id="wrap">

<div?id="hedder">hadder</div>

<div?id="mainbody">

????<div?class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaasdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsddddddddddddddddddddddddddddddd</div>

????????<div?class="right">sdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsdddddddddddddddddddddddddddddddsddddddddddddddddddddddddddddddd</div>

????

????</div>

????

<div?id="fotter">fotter</div>

</div>


</body>

</html>