overflow块级元素溢出问题

来源：互联网发布：足控们都用什么软件编辑：程序博客网时间：2024/06/08 04:08

最近设计网页布局时发现一个问题，一个本应该溢出父元素的块级元素没用发生溢出，反而父元素自动增大，已包含该子元素。

在实验中明明记得当子元素大小超过父元素是，会发生溢出，怎么会矛盾呢？

一、该溢出不溢出

代码：<HTML>
<HEAD>
<TITLE>CSS设置网页头部格式</TITLE>
<style type="text/css">

body
{border: thin solid #cc9900;}

#submenu
    {
height:48px;
        border:thin dashed red;
    background-color:#dfdbdc;
    }
#submenu_r
    {
margin:10px 0 0 0;
        height:88px;
color:#000;
        border:thin solid black;
    }
.right
    {
        float:right;
    }
   </style>
</HEAD>
<BODY>

</div>
</div>

</BODY>
</HTML>

二、实验中的情况（已经把两种代码改的高度相似）

代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-epuiv="Content-Type" content="text/html; charset=gb2312">
<title>溢出</title>
<style type="text/css">
<!--
body
{border: thin solid #cc9900;}

#dd
{
    height:48px;
    border:thin dashed red;
    background-color:#dfdbdc;
}
#yichu
{
margin:10px 0 0 0;
        height:78px;
color:#000;
        border:thin solid black;
}
.right
    {
        float:right;
    }
-->
</style>
</head>
<body>
<div id="dd">
   <div id="yichu" class="right">
   <ul>
      <li>第一步：规划好网站；
      <li>第二步：认真实施；
   </ul>
   </div>
</div>
</body>
</html>

三、分析

这两段代码几乎一摸一样，唯一不同的就是实验中的第一句：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

但却造成两点区别：

1、没用这句，该溢出的子块元素不溢出；

2、有了这句，body元素的边框变小了。

试验还发现，这句改成transitional，显示效果不变。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">