子div怎么超出父div底部了？

父div中有两个子div，这两个字div的display都是inline-block，想让他们一个在左边，一个在右边，填满父div，但是为什么其中一个子div会超出父div底边，子div不应该始终在父div之内吗?(前端小白)

html、css和结果如下：

<div class="intr-row">
    <div style="width: 80px; height: 100px; line-height: 100px; display: inline-block; font-size: 14px; background-color: #2E58FF;">
        自我介绍
    </div>
    <div style="width: 620px; display: inline-block; background-color: #FF0000; height: 100px;"></div>
</div>

.intr-row{
	height: 100px;
	background-color: #00FFFF;
	font-size: 0;
}

自我介绍那个块里添加一个 vertical-align:top;

具体参加：https://www.imooc.com/wenda/detail/352303、https://www.cnblogs.com/zxjwlh/p/6219896.html

自我介绍加个float：left

给.intr-row加display:flex;或者自我介绍div加float：left

不要这样子写，你非要这样，那要给第一个子div加个overflow:hidden;加上文字已经溢出了

更好得方法可以用浮动，也可以用弹性盒布局

<div class="intr-row">
    <div class="left">
        自我介绍
    </div>
    <div class="right"></div>
</div>

<style>
    //浮动
.intr-row{
    width:100%;
    height:100px;
}
.left{
    float:left;
    width:35%;//宽度自己设定
    height:100%;
    background:#f00;

}
.right{
    overflow:hidden;
    height:100%;
    width:65%;
}

//弹性盒得方法
.intr-row{
    width:100%;
    height:100px;
    display:flex;
}
.left{
    width:35%;//宽度自己设定
    height:100%;
    background:#f00;

}
.right{
    height:100%;
    width:65%;
}
</style>

你父元素不要给固定高度，让子元素撑开父元素高度。

你给了固定高度，子元素内容超出就是会溢出父元素，其实不算溢出，你给父元素设置overflow:hidden的话是可以将溢出部分隐藏的。

设置了inline-block后，你想要放在右边的子元素需要设置float:right。

这种情况还是建议使用flex布局省心。

使用flex布局就行了 父盒子添加 display：flex  子盒子  flex：1