标题内容包含在#header中，但#header显示为空

Question

我的标题内容被包装到#header中，但是当我设置边框以显示结构时，它显示我的＃header的内容位于#header本身之后。可能是什么问题？这是我的代码：

#header {
	border:1px solid red;
	max-height:150px;
}

#logo {
	border:1px solid red;
	display:inline-block;
	float:left;
}

#navbar {
	border:1px solid red;
	display:inline-block;
    float:right;
}

#logo_img {
	max-height:50px;
}

.nav li {
	display:inline;
}

<div id="header">
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="header-left clearfix">
                <div id="logo" class="logo">
                    <a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="header-right clearfix">
                <div id="navbar">
                    <div class="container-fluid">
                       <ul class="nav">
                           <li><a href="#banner">Home</a></li>
                           <li><a href="#about">About</a></li>
                           <li><a href="#services">Services</a></li>
                           <li><a href="#portfolio">Portfolio</a></li>
                           <li><a href="#footer">Contact</a></li>
                       </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

它的可能是，因为你设置了max-height，但内容正在流出。

Answer 2

如果您使用的是浮点数，则可以对标题使用clearfix，使其扩展为内容大小，如下所示：

＆＃13;

＆＃13;

#header {
  border:1px solid red;
  max-height:150px;
}

#logo {
  border:1px solid red;
  display:inline-block;
  float:left;
}

#navbar {
  border:1px solid red;
  display:inline-block;
  float:right;
}

#logo_img {
  max-height:50px;
}

.nav li {
  display:inline;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

＆＃13;

<div id="header" class="clearfix">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="header-left clearfix">
          <div id="logo" class="logo">
            <a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="header-right clearfix">
          <div id="navbar">
            <div class="container-fluid">
              <ul class="nav">
                <li><a href="#banner">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#footer">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

当您包含引导程序样式表时，菜单会变大，因此您可能希望从max-height中删除#header，以便能够扩展到完整高度。您可能还有其他一些菜单用途，因此无法一直扩展/打开。

Answer 3

这是因为标题内的元素是浮动元素。您可以将overflow: hidden添加到#header，这是一个相当奇怪的技巧，但它会有所帮助。