如何仅使用浮动将 H2 移动到 H1 下方答案

【问题标题】：How to Move H2 Beneath H1 With Only Floats如何仅使用浮动将 H2 移动到 H1 下方
【发布时间】：2019-06-24 03:00:55
【问题描述】：

H2 不会低于 H1。

我正在为客户建立一个网站，并希望导航栏具有以下对齐方式：左侧的图标，图标右侧的 H1，H1 下方的 H2。我已经完成了前两个部分，但我的 H2 不会移动到 H1 下方。谁能帮我解决这个问题？

    #header-nav {
        width: 100%;
        background-color: #3985BA;
        border-radius: 0;
        border: 0;
    }
    
    #logo {
        background: url('../images/piano.png') no-repeat;
        width: 200px;
        height: 200px;
    }
    
    .navbar-brand {
        padding-top: 25px;
        text-align: center;
    }
    .navbar-brand h1 {
        text-transform: uppercase;
        font-family: bebas-neue, sans-serif;
        text-shadow: 1px 1px 1px #222;
        line-height: .75;
    }
    .navbar-brand span {
        text-transform: uppercase;
        color: #A7D8DC;
        margin-top: 15px;
        font-weight: 600;
    }
    .navbar-brand a:hover,.navbar-brand a:focus {
        color: #04292C;
        text-decoration: none;
    }
    
    #header1 {
        color: #04292C;
    }

        <header>
            <nav id='header-nav' class='navbar navbar-default'>
                <div class='container'>  
                    <div class='navbar-header'> 
                        <a href="index.html" class='float-left'>
                            <div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div>
                         </a>
                    <div class='navbar-brand'>
                        <a href='index.html' class='float-left' id='header1'><h1>Sandra's Studio</h1></a>
                         <p>
                             <span id='header2'>Cumming, GA</span>
                         </p>
                     </div>
    
                 </div>
             </div>
         </nav>
     </header>

【问题讨论】：

<a> 是一个内联元素。而<div> 和<p> 是块级元素。不要将块级元素包装在 <a> 中。将<a> 放在块元素内。
@enxaneta 有没有特定的方法可以在我的代码中执行此操作？我对 Web 开发还很陌生，不知道如何准确地修复我的代码。

标签： html css bootstrap-4

【解决方案1】：

这是你想要的吗？

我用h1 包裹了a 标签，然后添加了clearfix 类来清除浮动。

<h1 class="clearfix">
   <a href='index.html' class='float-left' id='header1'> 
   Sandra's Studio </a>
</h1>

#header-nav {
  width: 100%;
  background-color: #3985BA;
  border-radius: 0;
  border: 0;
}

#logo {
  background: url('../images/piano.png') no-repeat;
  width: 200px;
  height: 200px;
}

.navbar-brand {
  padding-top: 25px;
  text-align: center;
}

.navbar-brand h1 {
  text-transform: uppercase;
  font-family: bebas-neue, sans-serif;
  text-shadow: 1px 1px 1px #222;
  line-height: .75;
}

.navbar-brand span {
  text-transform: uppercase;
  color: #A7D8DC;
  margin-top: 15px;
  font-weight: 600;
}

.navbar-brand a:hover,
.navbar-brand a:focus {
  color: #04292C;
  text-decoration: none;
}

#header1 {
  color: #04292C;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
  <nav id='header-nav' class='navbar navbar-default'>
    <div class='container'>
      <div class='navbar-header'>
        <a href="index.html" class='float-left'>
          <div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div>
        </a>
        <div class='navbar-brand '>
          <h1 class="clearfix"><a href='index.html' class='float-left' id='header1'> Sandra's Studio </a></h1>
          <p class="text-left">
            <span id='header2'>Cumming, GA</span>
          </p>
        </div>

      </div>
    </div>
  </nav>
</header>

【讨论】：