margin-bottom不以父元素为标准

盒子本身是文档型的，子元素也是文档流，但是给子元素margin-bottom，子元素以body为参照，不以父元素为参照

盒子布局
 <div class="search-box">
        <div class="search">
            <span>123</span>
            <div class="clear"></div>
        </div>
    </div>

css样式
.search-box {
    max-width: 540px;
    min-width: 320px;
    /* position: fixed;
    top: 0;
    left: 50%; */
    width: 100%;
    height: 50px;
    background-color: pink;
    /* transform: translateX(-50%); */
}

.search {
    overflow: hidden;
    box-sizing: border-box;
    border: 1.8px solid #0086f6;
    margin: 9px;
    border-radius: 16px;
    height: 32px;
    line-height: 28px;
}


span {
    background-color: #0086f6;
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-bottom: 100px;
}

.clear {
    clear: both;
}

  你给父级设置高度，多余的外边距当然就顶出去了。