为什么我的媒体查询将元素从容器中取出？

Question

你好社区：我现在正在学习 GridSystems。我根据屏幕尺寸做了 2 个媒体查询：第一个是 768px，第二个是 480px。但是当我调整屏幕大小时，元素从它们的容器中出来。为什么？我已经应用了 clearfix hack。我希望元素不会从它们的容器元素中出来。（不一定是 .container 但每个容器元素。）

html,body{
  box-sizing:border-box;
  margin:0;
}

.container{
  width:95%;
  margin-left:auto;
  margin-right:auto;
  background-color:yellow;
}
.container::after{
  content:"";
  clear:both;
  display:block;
}

.row{
  box-sizing:border-box;
  height:50px;
  border:5px solid orange;
  width:auto;
}

.col{
  float:left;
  box-sizing:border-box;
  height:100%;
  border:5px solid red;
  width:auto;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%;}
.col-4{width:100%;}

/*Wichtige Viewports
  >1200+px:Desktop
  768px:Tablet Hochformat;
  480px:Handy Querformat
*/

@media(max-width:768px){
  .col-1{width:50%}
  .col-2{width:50%}
}

@media(max-width:480px){
  .col-1{width:100%}
  .col-2{width:100%}
  .col-3{width:100%}
}

<div class="container">
            <div class="row">
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
                <div class="col col-1"></div>
            </div>
            <div class="row">
                <div class="col col-2"></div>
                <div class="col col-2"></div>
                <div class="col col-2"></div>
            </div>
            <div class="row">
                <div class="col col-3"></div>
                <div class="col col-3"></div>
            </div>
            <div class="row">
                <div class="col col-4"></div>
            </div>
        </div>

Answer 1

两件事：

我建议不要显式设置父 .row 元素高度
但最好在子元素上设置它 .col - 如果需要 - 最好不要设置它但让元素自然流动以从内到外填充
在行 class

我已经在 css 块编辑器中评论了这一点所以看看这是否清除了你的面团

有像 bootstrap 这样的框架和其他一些框架可以自动为您执行此操作，但最好走低路径并了解中心下的工作原理 - 欢呼

html,
body {
  box-sizing: border-box;
  margin: 0;
  font-size: 16px;
}

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

.row {
  box-sizing: border-box;
  /* height: 50px; 
    I'd suggest to not have explicit height set on parent
  */
  border: 5px solid orange;
  width: auto;
}
/* set row's after pseudo to clear floats of child elems - short clearfix */
.row:after{
  content: '';
  clear: both;
  display: table;
}

.col {
  float: left;
  box-sizing: border-box;
  height: 2em; /* but would suggest to set height of child elements - .col's */
  border: 5px solid red;
  width: auto;
}

.col-1 {
  width: 16.6666%;
}

.col-2 {
  width: 33.3333%;
}

.col-3 {
  width: 50%;
}

.col-4 {
  width: 100%;
}


/*Wichtige Viewports
  >1200+px:Desktop
  768px:Tablet Hochformat;
  480px:Handy Querformat
*/

@media(max-width:768px) {
  .col-1 {
    width: 50%
  }
  .col-2 {
    width: 50%
  }
}

@media(max-width:480px) {
  .col-1 {
    width: 100%
  }
  .col-2 {
    width: 100%
  }
  .col-3 {
    width: 100%
  }
}

<div class="container">
  <div class="row">
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
  </div>
  <div class="row">
    <div class="col col-2"></div>
    <div class="col col-2"></div>
    <div class="col col-2"></div>
  </div>
  <div class="row">
    <div class="col col-3"></div>
    <div class="col col-3"></div>
  </div>
  <div class="row">
    <div class="col col-4"></div>
  </div>
</div>

为什么我的媒体查询将元素从容器中取出？

Why is my media query putting elements out of their container?

html

css

media-queries

css-float

clearfix