Html 为什么子div渲染父div之外的一半？

为了解决这个问题，我已经遇到过几次这个问题，并多次修改代码，但似乎没有任何效果。我有我的父分区，在本例中是“页面顶部”，我的子分区是“社交媒体包装器”，其中包含社交媒体图标列表。然而，这些社交媒体图标在“社交媒体包装”之外呈现了一半。这意味着我只能看到每个图标的上半部分。想法

<div id='top_of_page'>
<div id='social_media_wrapper'>
<ul id='social_media'>
<li><img src='images/facebook_icon.png' class='social_media_icon'></li>
<li><img src='images/twitter_icon.png' class='social_media_icon'></li>
<li><img src='images/instagram_logo.png' class='social_media_icon'></li>
</ul>
</div>
</div>

ul#social_media {
list-style-type: none;
}

ul#social_media li {
float: right;
}

.social_media_icon{
height:24px;
margin-right:5px;   
}


#social_media_wrapper{
position:relative;
height:24px;
max-width:200px;
background-color:white;
overflow:hidden;
margin-top:3px;
float:right;
}

#top_of_page{
width:100%;
height:30px;
background-color:#1f1f1f;
border-bottom:2px solid black;
}

ul#社交媒体{
列表样式类型：无；
}
ul#社交媒体李{
浮动：对；
}
.社交媒体图标{
高度：24px；
右边距：5px；
}
#社交媒体包装{
位置：相对位置；
高度：24px；
最大宽度：200px；
背景色：白色；
溢出：隐藏；
利润上限：3倍；
浮动：对；
}
#页面顶部{
宽度：100%；
高度：30px；
背景色：#1F；
底部边框：2件纯黑；
}

这是因为默认情况下

元素是，并且列表项也会尝试在默认情况下进行偏移

要更正此问题，只需将应用于

ul

：

ul#社交媒体{
显示：内联；
列表样式类型：无；
}
ul#社交媒体李{
浮动：对；
}
.社交媒体图标{
高度：24px；
右边距：5px；
}
#社交媒体包装{
位置：相对位置；
高度：24px；
最大宽度：200px；
背景色：白色；
溢出：隐藏；
利润上限：3倍；
浮动：对；
}
#页面顶部{
宽度：100%；
高度：30px；
背景色：#1F；
底部边框：2件纯黑；
}

添加了显示：内嵌到ul，并将其修复。谢谢各位