float在缩放/较低分辨率时突破了标题

Question

浮动在缩放/降低分辨率时突破标题 没有1080p以外的缩放/分辨率的外观：http://gyazo.com/d3df8ac607362c1c5301f92307d6a636 截图：http://gyazo.com/4c4a0f855d312587de9553b74feea2a0

黑色实际上是身体......而下面的标题颜色是1000px导航栏。 HTML

<div id="header"> 
    <div id="header_content"> 
        <div id="header_content_right"> 
            <!-- removed form code, not needed. --> 
        </div> 
        <div id="header_content_left"> 
            <!-- removed logo image, not needed. --> 
        </div> 
    </div> 
</div>

---

CSS

#header {
    background: #008BFF;
    padding-bottom: 10px;
}

#header_content {
    width: 1000px;
    margin: 0 auto;
    color: white;
    padding-top: 10px;  
}

#header_content_left {
    color: white;
}

#header_content_left img {
    margin-right: 15px;
}

#header_content_right {
    float: right;  
}

Answer 1

将padding-bottom: 10px;从#header移至#header_content即可解决此问题！