在一个指定大小（指定 width 和 height 属性）的元素中放置一个更大的元素,会导致子元素的内容扩展到父元素的边界之外。浏览器为什么要允许子元素可以超出父元素限定的范围呢?这么设计的原因是什么?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2172 天前的主题，其中的信息可能已经有所发展或是发生改变。

先看代码:

<body>
    <!-- 父元素 -->
    <div style="width:100px;height:100px; border: 2px solid blue">
        <!-- 子元素  -->
        <div style="width:200px;height:200px; border: 2px solid red"></div>
    </div>
</body>

我的本意原是既然我设置了父元素的 width 和 height,那肯定是需要让子元素的内容老老实实地待在父元素限定的 width 和 height 属性之内啊，但浏览器显示的却是子元素可以轻轻松松突破父元素的范围限制，导致子元素的内容跑到父元素的边界之外了

浏览器为什么要允许子元素可以超出父元素呢?或者当子元素超出父元素时,为什么不帮我报个错呢? 就如一个盒子，一个盒子里面怎么能装下一个比它更大的盒子?

元素

height

width

div

15 条回复 • 2019-01-21 17:49:08 +08:00

qwertyzzz

2019-01-06 16:54:40 +08:00

展示效果不就相当于给你报错了吗

sunbing

2019-01-06 17:01:06 +08:00 via Android

如果不溢出来，你是发现不了的
html 只是标记，浏览器只是把它转换成方便阅读的形式。

t6attack

2019-01-06 17:04:37 +08:00

人家不是提供了 overflow:让你自己更灵活的处理嘛。

geelaw

2019-01-06 17:07:31 +08:00

一个无聊的原因：这样可以方便地实现不占空间的装饰物。

另一个原因：因为一开始就是这样的，为了兼容性。

manyfreebug

2019-01-06 17:15:17 +08:00

@t6attack 在没有 overflow 这个属性的年代呢

Pastsong

2019-01-06 17:26:26 +08:00 via Android

@manyfreebug 没有 overflow 的年代 HTML 不是设计来布局的，而是展示文档的，一般情况展示全 content 比它的 box 重要

lrz0lrz

2019-01-06 18:02:17 +08:00 via Android

1、传统上网页是文档而非程序，所以 HTML 和 CSS 一般不报错，而是尽量把内容展示出来。

2、问没有 overflow 属性的年代没什么意义，overflow 属性是在 98 年的 CSS 2 中提出的，而 CSS 定稿于 96 年底，所以这个年代只有一年多。而且那时的网页一般使用 HTML 属性而非 CSS 来排版，所以是否溢出需要自己控制，而且利用溢出可以实现很多效果。

3、"既然我设置了父元素的 width 和 height,那肯定是需要让子元素的内容老老实实地待在父元素限定的 width 和 height 属性之内啊"

待在父元素内也有 hidden 和 scroll 两种情况，也需要用 overflow 属性决定。