晚上公司同事找我说这里溢出的div为什么没有被overflow隐藏，我看了看，有点印象说你试试在html设置overflow，然后同事尝试了一下，发现效果可以了。

我之前在《HTML并不简单》一书中看过这方面知识点，特此写篇博客留作纪念。

布局的怪异性

<style>
    html {
        overflow: auto;
        /* overflow: hidden;
        overflow: scroll; */
    }
    body {
        height: 100px;
        border: 20px solid red;
        background-color: black;
        overflow: hidden;
        div {
            height: 500px;
            background-color: yellow
        }
    } 
</style>
<html>
    <body>

    </body>
</html>

布局问题当body设置overflow: hidden时候，如果此时html并未设置overflow属性时。body的hidden并未把div溢出的高度隐藏掉，但是如果给html设置了overflow属性且非visible值时，此时body的hidden属性就会把溢出的div隐藏掉。

解释一下：如果html元素没有设置overflow属性，那么body元素设置的overflow属性值可以看成设置在html元素上，html元素的overflow属性生效高度至少为一屏。

所以如果你将div的高度设置大于一屏(html元素并未设置overflow属性)，那么溢出的div将会隐藏，因为此时溢出隐藏的容器是html

下面例子：div高度设置大于一屏，此时溢出隐藏的容器是html

<style>
    html {
        overflow: auto;
        /* overflow: hidden;
        overflow: scroll; */
    }
    body {
        height: 100px;
        border: 20px solid red;
        background-color: black;
        overflow: hidden;
        div {
            height: 5000px;
            background-color: yellow
        }
    } 
</style>
<html>
    <body>

    </body>
</html>

背景的怪异性

<style>
    html {
        background: linear-gradient(to bottom, #333, #666);
    }
    body {
        background-color: yellow;
    }
</style>

<html>
    <body>
        <div></div>
    </body>
</html>

渐变色以8px条纹铺满

如果html没设置颜色，只给body设置颜色，且body没有高度，此时颜色跟随body的，为什么？

如果html设置了渐变色，且body没设置颜色，此时html背景色为什么8px平铺？

解释：当仅当给body设置背景色时，渲染效果和html元素设置背景色一直，由于html元素的背景高度至少一屏，因此背景色是铺满整个屏幕的

当html元素设置了渐变背景后，body元素的背景色按照普通html元素的背景规则渲染，由于高度为0，因此黄色背景消失

body元素存在一个margin: 8px默认样式，在css中存在”margin合并的”现象，会合并最大的margin

怪异的body和html

布局的怪异性

背景的怪异性