为什么带有 .clearfix 类的元素会折叠？-解网

问：

为什么类为 .clearfix 的元素仍然折叠并且它们没有高度。我想 Clearfix 应该可以解决它。类 .clearfix 位于 /GENERELLES/ 下我尝试了一切，但我无法解决这个问题。问题是具有 .clearfix 类的元素没有任何高度，尽管我给了它们 clearfix hack。请帮助我不知道该如何继续。

/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/

/* GLOBAL */
body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size:16px;
}

* {
  box-sizing: border-box;
}

/* GENERELLES */

.clearfix::after{
  content= "";
  display: block;
  clear: both;
}

/*===NAVIGATIONSLEISTE===*/

.header-nav{
  width:100%;
  height:50px;
  background-color:#3d3f45;
  position:relative;
  font-size:25px;
  font-weight:bold;
}
.header-nav a>img{
  position:absolute;
  height:30px;
  width:auto;
  top:10px;
  left:10px;
}
.header-nav ul>li{
  display:inline-block;
  height:100%;
}

.header-nav ul{
  margin:0;
  padding:0;
  position:absolute;
  height:100%;
  right:10px;
}
.header-nav ul>li>a{
  display:inline-block;
  margin-top:10px;
}

.header-nav ul>li>a:link{color:white;text-decoration:none;}
.header-nav ul>li>a:hover{color:#E5E5E5;text-decoration:none;}
.header-nav ul>li>a:active{color:#E5E5E5;text-decoration:none;}
.header-nav ul>li>a:visited{color:white;text-decoration:none;}

#active{
  background-color:#A62C21;
}

/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-button{
  color:white;
  float:right;
  font-size:30px;
  border: 2px solid white;
  padding-left:9px;
  padding-right:9px;
  margin-top:5px;
  margin-right:5px;

}
#mobile-nav-content>ul>li{
  display:block;
  background-color:#3D3F45;
  padding-left:20px;
  padding-right:20px;
}
#mobile-nav-content>ul{
  margin-right:40px;
}

/* HEADER-BANNER */
#header-banner{
  background: url("../img/hintergrund.jpg") no-repeat;
  width:100%
  height:0;
  padding-top:20.83%;
  background-size:contain;
}
#header-banner-klein{
  background: url("../img/hintergrund-klein.jpg") no-repeat;
  width:100%
  height:0;
  padding-top:15.625%;
  background-size:contain;
}
/* GRID SYSTEM */

.container{
  width:95%;
  margin-left:auto;
  margin-right:auto;
}

.row::after{
  content:"";
  clear:both;
  display:block;
  border: 0 !important;
}
[class*="col-"]{
  float:left;
  padding:10px;
}

.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%;     }
.col-6{width:100%;    }

 /* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}

[class*="col-"]{
  background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */

/* Responsive Design */
@media(max-width:768px){
  .col-1{width:33.3333%;}
  .col-2{width:50%;}
  .col-3{width:100%;}
}
@media(max-width:480px){
  .col-1{width:50%;}
  .col-2{width:100%;}
  .col-3{width:100%;}
}

/* GRID SYSTEM FIX */

.header-nav *{
  padding:0;
  border:0;
}

.header-nav .container{
  width:100%;
}

<body>
    <!-- NAVIGATIONSLEISTE -->
    <nav class="header-nav">

      <!-- <div class="container">
        <div class="row">
          <div class="col-6">
            <a href="index.html">
              <img src="src/img/webdesign-logo.png">
            </a>
            <ul>
              <li id="active"><a href="index.html">Startseite</a></li>
              <li><a href="Leistungen.html">Leistungen</a></li>
              <li><a href="Kontakt.html">Kontakt</a></li>
              <li><a href="Impressum.html">Impressum</a></li>
            </ul>
          </div>
        </div>
      </div> -->
      <div class="container">
        <div class="row">
          <div class="col-6 clearfix">
            <a href="index.html">
              <img src="src/img/webdesign-logo.png">
            </a>

            <div id="mobile-nav-dropdown" class="clearfix">

              <div id="mobile-nav-button">&equiv;</div>

              <div id="mobile-nav-content" class="clearfix">

                <ul>
                  <li id="active"><a href="index.html">Startseite</a></li>
                  <li><a href="Leistungen.html">Leistungen</a></li>
                  <li><a href="Kontakt.html">Kontakt</a></li>
                  <li><a href="Impressum.html">Impressum</a></li>
                </ul>

              </div>

            </div>



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

HTML CSS 清除修复

为什么带有 .clearfix 类的元素会折叠？

Why are the elements with .clearfix class collapsing?

评论

评论