CSS中@media规则下float: left失效问题求助

问题根源 #

你设置的.col-lg-4宽度是33.33%，但每个列元素还带有margin: 10px，三个元素的总宽度（333.33% + 320px）会超出父容器的100%宽度，导致第三个元素被迫换行。box-sizing: border-box只处理内边距和边框，外边距(margin)不会计入元素的总宽度计算，这是核心问题。

修复方案 #

方案1：用calc()调整列宽度 #

直接在百分比宽度基础上减去左右margin的总宽度，让三个列加margin后的总宽度刚好等于容器宽度：

* {
    box-sizing: border-box;
}

body{
    margin-top: 40px;
    background-color: #F9F9FB;
}

.container-fluid {
    margin-top: 50px;
}

h3 {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 1px;
    width: 33.33%;
    height: 28px;
    float: right;
    text-align: center;
    background-color: #B59F84;

}

.row div {
    border: 1px solid black;
    padding: 0px;
    margin: 10px;
    background-color: #FFFFF5;
}

p {
    margin: 0px;
    padding: 10px;
    clear: right;
}

/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: calc(8.33% - 20px);
  }
  .col-lg-2 {
    width: calc(16.66% - 20px);
  }
  .col-lg-3 {
    width: calc(25% - 20px);
  }
  .col-lg-4 {
    width: calc(33.33% - 20px);
  }
  .col-lg-5 {
    width: calc(41.66% - 20px);
  }
  .col-lg-6 {
    width: calc(50% - 20px);
  }
  .col-lg-7 {
    width: calc(58.33% - 20px);
  }
  .col-lg-8 {
    width: calc(66.66% - 20px);
  }
  .col-lg-9 {
    width: calc(74.99% - 20px);
  }
  .col-lg-10 {
    width: calc(83.33% - 20px);
  }
  .col-lg-11 {
    width: calc(91.66% - 20px);
  }
  .col-lg-12 {
    width: calc(100% - 20px);
  }
}

方案2：调整margin的归属（更优雅） #

把列的左右margin去掉，给父元素.row添加左右padding，只保留列的上下margin，避免破坏宽度计算：

* {
    box-sizing: border-box;
}

body{
    margin-top: 40px;
    background-color: #F9F9FB;
}

.container-fluid {
    margin-top: 50px;
}

h3 {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 1px;
    width: 33.33%;
    height: 28px;
    float: right;
    text-align: center;
    background-color: #B59F84;

}

.row {
    padding: 0 10px;
}
.row div {
    border: 1px solid black;
    padding: 0px;
    margin: 0 0 20px 0;
    background-color: #FFFFF5;
}

p {
    margin: 0px;
    padding: 10px;
    clear: right;
}

/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

关键说明 #

float本身功能正常，问题出在元素总宽度（百分比宽度+外边距）超出容器导致布局换行。box-sizing: border-box仅影响元素自身的内边距和边框是否计入宽度，外边距是元素外部空间，不会被包含在内。

内容的提问来源于stack exchange，提问作者ren-a-ps