overflow块级元素溢出问题

最新推荐文章于 2024-04-23 02:00:49 发布

hnu2009

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量912

点赞数 1

分类专栏： CSS 文章标签： border html xhtml float div class

本文链接：https://blog.csdn.net/hnu2009/article/details/6274198

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

一、该溢出不溢出

代码：<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">

hnu2009

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow块级元素溢出问题

<br />最近设计网页布局时发现一个问题，一个本应该溢出父元素的块级元素没用发生溢出，反而父元素自动增大，已包含该子元素。<br />在实验中明明记得当子元素大小超过父元素是，会发生溢出，怎么会矛盾呢？<br /> <br />一、该溢出不溢出<br /><br /> <br />代码：<HTML><br /><HEAD><br /> <TITLE>CSS设置网页头部格式</TITLE><br /> <style type="text/css"><br /> body<br /> {b
复制链接

扫一扫