CSS 在窄屏幕上右浮动的div，在缩小屏幕宽度后下降

在本文中，我们将介绍如何使用CSS来实现在宽屏幕上将div元素右浮动，然后在缩小屏幕宽度后将其下降的效果。这种布局常用于响应式设计，以确保在不同设备上都可以有效地展示内容。

阅读更多：CSS 教程

利用浮动实现右浮动效果

我们可以通过使用CSS的float属性来实现将div元素右浮动的效果。例如，我们有一个类名为float-right的div，并希望它在宽屏幕上右浮动。我们可以使用以下CSS代码来实现这一效果：

.float-right {
  float: right;
}

然后，我们可以将float-right类应用于我们希望右浮动的div元素上。这样，该div元素就会右浮动在其容器中。

在窄屏幕上下降div元素

当屏幕宽度缩小到一定程度时，我们希望右浮动的div元素能够下降并显示在正常流中。为了实现这个效果，我们可以使用CSS的媒体查询。

@media (max-width: 768px) {
  .float-right {
    float: none;
    clear: both;
  }
}

在上面的代码中，我们使用媒体查询并设置max-width为768px，表示当屏幕最大宽度达到或小于768px时，媒体查询内部的CSS代码将被应用。在媒体查询内部，我们使用float: none;来取消右浮动效果，并使用clear: both;来清除浮动。这样，被应用了float-right类的div元素将会下降并显示在正常流中。

示例

我们来看一个具体的示例，以更好地理解上述的CSS代码。

<!DOCTYPE html>
<html>
<head>
<style>
.float-right {
  float: right;
}

@media (max-width: 768px) {
  .float-right {
    float: none;
    clear: both;
  }
}
</style>
</head>
<body>

<h2>在缩小屏幕宽度后下降的div元素</h2>

<div class="container">
  <div class="float-right">
    <p>这是右浮动的div元素。</p>
  </div>
  <p>这是正常流中的内容。</p>
</div>

</body>
</html>

在上面的示例中，我们给一个div元素添加了float-right类，并在容器内部分别放置了右浮动的div元素和正常流中的内容。当屏幕宽度较宽时，右浮动的div元素将会浮动在其容器的右侧。当屏幕宽度缩小到768px或更小时，右浮动的div元素将会下降并显示在正常流中。