响应式清除浮动_快速提示：使用浮动对象构建响应式布局

响应式清除浮动

在今天的快速提示中，我们将学习如何使用CSS floats （一种古老但值得信赖的布局方法）来构建响应式布局。 完成之后，我们将看到Bootstrap如何处理事情。 浮动对象最初并不是用来构成页面结构的基础的（新CSS标准，例如flexbox和grid旨在解决这一问题），因此使用浮动对象有时会很棘手。 让我们看一个例子来说明这一点。

建立响应式布局

假设我们要构建此卡布局：

查看完整版 ，以获取更清晰的想法。

基本样式

对于这些卡，我们不想为字幕设置固定的高度。 我们也不希望它们被固定为宽度。 因此，为了使卡保持可用状态，以免卡挤得太多，我们需要根据视口大小显示不同数量的列。

我们设置了一些媒体查询，以便满足以下条件：

视口	列数
<400px	1个
≥400像素	2
≥768像素	3
≥1024像素	4

这是标记； 列出图形元素内包含图像和标题的项目：

<ul class="clearfix">
  <li>
    <figure>
      <img src="path-to-the-image" alt="">
      <figcaption>Some description here</figcaption>
    </figure>
  </li>
       
  <!-- more list items here -->
</ul>

这是样式CSS：

/* stylistic styles */
body {
  width: 80%;
  max-width: 1200px;
  margin: 40px auto;
  font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;
  background: #cfd8dc;
  color: #37474f;
}

figure {
  background: whitesmoke;
  margin: 0 0 40px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

figcaption {
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul {
  margin: 0;
  padding: 0;
}

/* structural styles */

li {
  list-style-type: none;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* media queries */

@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
}

@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
}

您会在底部注意到媒体查询，该查询指示在某些视口中卡片的宽度。 这是给我们的：

但是，这种灵活布局的问题在于，由于不清除每一行，因此某些卡在尝试向左穿越时会卡住。

识别要清除的卡

根据上面的示例，当该行包含四张卡时，我们需要清除第五张，然后清除第九张，依此类推。 为此，我们使用:nth-of-type(an+b) CSS伪类，其中an+b参数代表所需的重复模式 。 例如，在大屏幕（即≥1024px）上，我们使用4n+1 。 此公式将找到每个因数为四的元素，然后选择下一个。

我们可以通过以下方式更改媒体查询以更改要清除的卡：

视口	列数	重复图案
<400px	1个	--
≥400像素	2	2n + 1
≥768像素	3	3n + 1
≥1024像素	4	4n + 1

这是实现这一目标CSS。 请注意，我们的媒体查询是累积性的，因此每次定义新的结算卡时，我们都必须重置上一张结算卡：

@media screen and (min-width: 400px) {
  li {
    width: 50%;
  }
	  
  li:nth-of-type(2n+1) {
    clear: left;
  }
}
	
@media screen and (min-width: 768px) {
  li {
    width: 33.333%;
  }
  
  li:nth-of-type(2n+1) {
    clear: none;
  }
  
  li:nth-of-type(3n+1) {
    clear: left;
  }
}

@media screen and (min-width: 1024px) {
  li {
    width: 25%;  
  }    
  
  li:nth-of-type(3n+1) {
    clear: none;
  }
  
  li:nth-of-type(4n+1) {
    clear: left;
  }
}

最后，值得一提的是：

• 代替clear:left属性值，我们同样可以使用更通用的clear:both属性值。
• 代替:nth-of-type(an+b) CSS伪类，我们同样可以使用:nth-child(an+b)伪类。
  

现在，我们已经讨论了一种清除浮点数的方法，为了扩展我们的知识，让我们看一下Bootstrap的方法。

使用Bootstrap方法

通过利用Bootstrap的网格系统，我们能够构建与上一个类似的响应式布局 。 同样，根据视口大小，我们的布局将更改：

视口	列数
<768px	2
≥768像素	3
≥992像素	3
≥1200像素	4

这是必需HTML，说明我们的列表项在超小视口中填充了十二列中的六列，在小视口中填充了四列，然后在大视口中填充了三列：

<div class="container">
  <ul class="row">
    <li class="col-xs-6 col-sm-4 col-lg-3">
      <figure>
        <img src="path-to-the-image" alt="" class="img-responsive">
        <figcaption>Some description here</figcaption>
      </figure>
    </li>
    
    <!-- more list items here -->
  </ul>
</div>

通常，假设所有列的高度都相等，那么此标记就是我们所需要的。 但是，在我们的示例中，列的高度不同，因此我们需要清除浮点数。 为此，我们将使用clearfix类以及响应实用程序类 。

首先，在超小屏幕（<768px）上，我们有两列布局，因此我们应该在第二个列表项之后清除浮点数。 在第二个列表项之后添加以下标记：

<li class="clearfix visible-xs-block"></li>

接下来，在中小型屏幕（≥768px和<1200px）上，我们采用三列布局，因此我们需要在每三个列表项之后清除浮点数。 为此，我们在每个第三个列表项之后添加一些额外的标记（对于最后一个列表项则不必要）：

<li class="clearfix visible-sm-block visible-md-block"></li>

最后，在大屏幕（≥1200px）上，我们有四列布局，因此我们应该在每四个列表项之后清除浮点数。 再次，在第四个列表项之后添加更多标记：

<li class="clearfix visible-lg-block"></li>

这些额外的块有点混乱（很多人不喜欢使用标记来驾驶样式），但是它们获得的最终结果与我们最初的方法相同。 每个列表项都是隐藏的，但当某些断点处于display: block;时除外display: block; 有效地充当了行之间看不见的水平分隔线。

这是相关的演示：

结论

在这篇简短的文章中，我们介绍了两种使用浮点数创建响应式布局的简单技术。 尽管浮动可能不是（也不应该）成为现代布局的首选，但我希望在某些时候您会发现这些技巧很有用。 如果您使用其他任何技术，请务必与我们分享！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-building-responsive-layouts-with-floats--cms-25625

响应式清除浮动