html - 如何修复包含 float 相对子项的父 div？

Question

我正在尝试为我的页眉提供一个固定位置，以便在滚动页面时页眉始终可见。 header (父 div)内部有两个子 div。当我将父 div 定位为固定时，父 div 高度设置为 0，它会忽略其子 div。我该如何做到这一点？

/*HEADER ELEMENTS*////////////////////////////////////////////////////
#header_container{
    min-width:240px;
    width:100%;
    height:auto;
position:fixed;

}

#header_container:after { 
    content: " "; 
    display: block; 
    clear: both;
} 

#left_header{
float:left;
width:42%;
display:block;
background:white;
padding:1%;
padding-left:7%;
position:relative;
}

.logo_link{
    padding:1%;
    margin:1%;
}


.lh_link{
   padding:1%;
   margin:1%;
}

.lh_link:hover{
  border: 1px solid #e9e9e9;
  
}

#right_header{
    float:right;
width:42%;
padding:1%;
padding-right:7%;
background:white;
text-align:right;
position:relative;
}

.rh_link{
   padding:1%;
   margin:1%;
}

.rh_link:hover{
  border: 1px solid #e9e9e9;
  
}



/**/

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div id="header_container" role="header">
    
    
    
    <div id="left_header">
        
        <a class="logo_link" href="">I am the logo</a><br><br>

        <a class="lh_link" href="">Welcome here</a>
        
        <a class="lh_link" href="">Articles</a>
    
        <a class="lh_link" href="">Join</a>
    
    </div>
    
    
    
    <div id="right_header">
        
        <br><br>
    
        <a class="rh_link" href="">About</a>
        
        <a class="rh_link" href="">Contact</a>
        
        <a class="rh_link" href="">Our Team</a>
        
        <a class="rh_link" href="">Services</a>
        
    </div>
    
    
    
</div>

Answer 1

试试这个:

#header_container{
  min-width:240px;
  width:100%;
  height:auto;
  position:fixed;

  float: left;
}

这是一个清理问题:因为您将包含的 div float 到左侧，所以您的容器 div 需要补偿它们的 float 。您可以使用上面的 CSS 或将 clear: both; 应用于包含的 div。这些方法中的任何一种都应该有相同的结果。