如果不设置高度，而且设置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

关注问题我要回答

923

操作

收起

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>