文章/答案/技术大牛

发布

css浮动跟随

CSS浮动跟随基础概念

CSS浮动（Float）是一种布局技术，它允许元素脱离正常的文档流，向左或向右浮动，直到遇到父容器的边缘或其他浮动元素。浮动元素会影响其周围的元素，使得其他元素可以围绕它进行布局。

类型

左浮动（float: left;）：元素向左浮动。
右浮动（float: right;）：元素向右浮动。
清除浮动（clear: both;）：阻止元素跟随浮动元素。

应用场景

图文混排：图片浮动在文字上方，文字环绕图片。
多栏布局：创建两栏或多栏布局，其中一栏浮动，另一栏占据剩余空间。
导航菜单：浮动可以用于创建水平导航菜单。

遇到的问题及解决方法

问题：浮动元素导致父容器高度塌陷

原因：当子元素浮动后，父容器无法自动扩展以包含这些浮动元素，导致高度塌陷。

解决方法：

使用clearfix技术：

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

<div class="container clearfix">
  <div class="float-left">浮动元素</div>
</div>

设置父容器高度：

.container {
  overflow: hidden; /* 或者使用 overflow: auto; */
}

使用Flexbox布局：

.container {
  display: flex;
}

问题：浮动元素影响周围元素布局

原因：浮动元素会脱离正常的文档流，影响其周围的元素布局。

解决方法：

使用clear属性：

.clear {
  clear: both;
}

<div class="float-left">浮动元素</div>
<div class="clear"></div>
<div>正常元素</div>

使用Flexbox或Grid布局：

.container {
  display: flex;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Float Example</title>
  <style>
    .container {
      border: 1px solid #000;
      padding: 10px;
    }
    .float-left {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 10px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-left"></div>
    <p>这是一段文字，它将环绕在浮动元素周围。</p>
    <div class="clear"></div>
    <p>这是另一段文字，它不会受到浮动元素的影响。</p>
  </div>
</body>
</html>

参考链接

通过以上信息，你应该对CSS浮动有一个全面的了解，并且知道如何解决常见的浮动相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

css中的浮动属性

javascript、html、css、web

我有两个p标记，其中一个(id=floating)具有css属性{float: right}。即。floating floating floating </p> </body> CSS

浏览 8提问于2016-02-11得票数 1

回答已采纳

2回答

图像不会在联系人窗体css旁边浮动。

html、css

图像浮动在形式之下，而不是在它的右边。下面是一些html和css代码：#contact-img1,#contact-img3 { height: auto; float

浏览 6提问于2022-10-23得票数 0

1回答

浮动菜单在Chrome中不起作用？

javascript、jquery、cross-browser

我正在尝试构建一个浮动菜单，当用户滚动屏幕时，它会跟随用户： $(window).scroll(function() { var offset = menuYloc+$(document

浏览 2提问于2010-08-04得票数 1

回答已采纳

2回答

以下是浮动元素，而不是侧元素。

html、css、css-float、sidebar

我不知道是什么代码导致了这个问题，因此我想请您查看。你能看出问题所在吗？

浏览 6提问于2016-01-01得票数 0

回答已采纳

1回答

尽管居中对齐，但Lightbox2 div标签左对齐

html、css、dreamweaver、lightbox2

下面是CSS文件： * Author: Lokesh Dhakar http://www.lokeshdhakar.com

浏览 4提问于2012-08-30得票数 0

4回答

CSS:小浮动问题

css

#sctryclip{ border: 2px solid #FF3399; }

浏览 0提问于2010-06-16得票数 0

回答已采纳

3回答

类中的多个div：

html、css

pending.php">Support</a></ul> Text这是css

浏览 3提问于2015-11-02得票数 1

回答已采纳

1回答

切换浮动菜单应该会使内容更加流畅。

jquery、css、twitter-bootstrap

我有一个浮动顶部菜单和一个浮动子菜单，因为我希望它们总是在文本的顶部(所以它们固定在顶部，而我可以滚动内容/数据)。该演示正在工作，但我真的希望我的“内容”DIV ( 40行)流体跟随子菜单，而它扩展/缩小(当你切换子菜单)。当前代码只在切换效果完成后才对内容DIV进行重新定位。= $(".menumain").outerHeight(); $(".menusub&q

浏览 1提问于2013-11-19得票数 0

2回答

Div跟随指针在悬停时

javascript、jquery、css、hover

我想显示一个浮动的div，当您在某些div中徘徊时，它会跟随指针，到目前为止，我发现jquery的这段代码可以在整个身体上运行，但是我想要的是在某些div上工作：<div id="tail">mouse tail</div>$(document).bind('mousemove', function(e){ left:

浏览 0提问于2019-04-18得票数 3

回答已采纳

2回答

右对齐导航栏

html、css

device-width, initial-scale=1">有没有办法解决这个问题？

浏览 20提问于2016-07-23得票数 1

回答已采纳

4回答

背景色不会出现在列表项的后面

css、html、user-interface

由于某些原因，我的列表项不在我的UL元素中，这干扰了页面的流动，并且看起来不正确。我已经尝试了所有的位置元素，但都不起作用。我想知道是不是因为我设计了一个不同的div而不是UL元素？红色边框应该包含列表元素，如果一个列表描述变得更长，那么红色背景也应该增长。

浏览 1提问于2012-03-10得票数 0

回答已采纳

1回答

CSS:使div高度适合父div

css、html

我试图让一个浮动的div有一个填充父div的高度。Left child - float:left问题是左边的孩子比右边的文本少，这意味着右边增加了父div的高度(以适应div)，但左边浮动的div没有跟随。css如下所示： bottom: 0; width: 100%;} .bottomleft

浏览 0提问于2013-11-13得票数 0

2回答

在HTML中，如何将文本保存在div底部(作为页脚)，并防止文本在屏幕上浮动超过500 at

html、css

示例div.content{ } color: #999999; font-size页脚文本将跟随屏幕的所有方式调整大小。有什么建议吗？

浏览 6提问于2011-10-07得票数 0

1回答

jquery -如何让元素跟随页面到达某一点？

javascript、jquery、jquery-plugins

我需要让一个元素，这将通常(取决于分辨率)离开页面的可视区域的底部，浮动在页面的底部，并跟随该页面向下滚动时(以类似的方式，效果的位置:固定在css中)。理想情况下，如果不支持css/js，元素也应该出现在“自然”位置。非常感谢， Stu

浏览 1提问于2009-07-28得票数 1

回答已采纳

3回答

如何使“发布”按钮跟随wordpress中的页面？

wordpress、button、publish

我想让发布按钮跟随页面(浮动/粘性)。有办法吗？谢谢你，安

浏览 16提问于2014-01-16得票数 0

回答已采纳

1回答

是否有轨道求解器或修改器允许轨道公差？

mrtk

为此，它需要跟随用户，但它还需要一个跟随阈值，让用户与它的每个角落进行交互。从设计的角度( Hololens，Hololens 2，MR，...)有一个浮动菜单是个好主意吗？

浏览 7提问于2019-04-26得票数 0

2回答

我最近开始学习css，当我学习浮点数时，我遇到了一些问题。 float属性指定元素应从正常流中提取，并>放置在其容器的左侧或右侧，其中文本和内联元素将>环绕在它周围。但我只是想知道，如果一个div跟随浮动元素呢？所以我写了一个测试，它没有环绕它，它与它重叠，我真的很困惑，因为有人告诉我，浮动元素不会从正常的文档流中提取，如果有足够的空间，下一个div将与它对齐。这是html和css，注意右边的div不是浮动的，如果它是浮动的，它会像我预期的那样运行，

浏览 4提问于2014-08-24得票数 0

回答已采纳

2回答

重新排序DOM元素

javascript、css、jquery-plugins、css-float、transpose

我有具有预定义宽度的CSS浮动元素，我希望它们从行转到列。实际上，对它们进行重新排序，使其看起来像是按列排序，而不是像浮动元素通常那样按行排序.当元素按字母顺序排列时，后者很容易搜索，因为跟随列比行更容易。我知道我可以使用CSS3列，这些列按左上角的顺序列出元素，但问题是IE 仍然不支持它们，甚至在IE9中也是如此。我真正需要的是当然，这只能在浮动

浏览 3提问于2011-07-28得票数 0

回答已采纳

2回答