浮动

float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将…

float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。

float 布局时代的「多列布局」

  • 早期（CSS2 时代，没有 Flex、Grid、CSS columns），开发者会用 float:left/float:right 把多个块级元素「并排」起来。
  • 这种做法可以实现类似「多列」的效果，比如三栏网站布局（左侧导航，中间内容，右侧广告）

所以 “float 用于多列布局” 指的是 传统页面分栏（columns as in layout），不是现在说的 CSS Multi-column Layout 模块。

最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。

正常情况：

image-20250423150137583

添加浮动：

image-20250423150201909

让我们考虑一下浮动是如何工作的——浮动元素 (这个例子中的 div 元素) 会脱离正常的文档布局流，并吸附到其父容器的左边（这个例子中的 body元素）。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间

我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。

image-20250423150400557

清除浮动

我们看到，一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要 停止 它；这是通过添加 clear 属性实现的。

在前例的 HTML 代码中，向浮动元素下方的第二个段落添加 cleared 类，然后向 CSS 文件中添加以下样式：

.cleared {
  clear: left;
}

image-20250423150629857

应该看到，第二个段落已经停止了浮动，不会再跟随浮动元素排布了。clear 属性接受下列值：

  • left：停止任何活动的左浮动
  • right：停止任何活动的右浮动
  • both：停止任何活动的左右浮动

清除浮动元素周围的盒子

现在你知道了如何停止浮动元素其后元素的浮动行为。我们来看个例子，如果存在一个盒子 同时 包含了很高的浮动元素和一个很短的段落，会发生什么。

问题所在

改变你的文档结构，使得第一个段落与浮动的盒子共同处于类名为 wrapper 的 <div>元素之下。

image-20250423150935167

如果将背景色属性置于段落上，那么这个背景色将处于浮动元素之下。

再一次强调，这是因为浮动元素处于正常文档流之外，停止紧随其后元素的浮动并不像之前那样奏效。如果你想让盒子联合包住浮动的项目以及第一段文字，同时让紧随其后的内容从盒子中清除浮动，这就是一个问题。

有三种方法可以处理这个问题，其中的两种在所有浏览器中均可以奏效（虽然看上去有点“小技巧”），剩下的一种是可以处理问题的较新的解决方案。

clearfix 小技巧

传统上，这个问题通常由所谓的 “clearfix 小技巧” 解决，其过程为：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。

向示例中添加以下 CSS 代码：

cssCopy to Clipboardplay

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

现在重载页面，盒子的浮动就应该清除了。这与在浮动盒子后手动添加诸如 div 的 HTML 元素，并设置其样式为 clear:both 是等效的。

image-20250423151221872

使用 overflow

一个替代的方案是将包裹元素的 overflow 属性设置为除 visible 外的其他值。

移除上一节添加的 clearfix CSS 代码；在包裹元素上添加 overflow: auto 规则。现在，盒子应该再一次停止浮动。

image-20250423151313881

这个例子之所以能够生效，是因为创建了所谓的 块格式化上下文（BFC）。可以把它看作页面内部包含所需元素的一小块布局区域。如此设置可以让浮动元素包含在 BFC 及其背景之内。大部分情况下这种小技巧都可以奏效，但是可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

display: flow-root

一个较为现代的方案是使用 display 属性的 flow-root 值。它可以无需小技巧来创建块格式化上下文（BFC），在使用上没有副作用。

从 .wrapper 中移除 overflow: auto 规则并添加 display: flow-root。如果你的浏览器支持该属性（支持的浏览器列表），盒子就会停止浮动。

css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

image-20250423151419428

浮动之后的位置

我将第三个盒子开启浮动，浮动发生了，但是是直接向右移动

image-20250423151720249

如果后面还有元素的话

image-20250423151945242

后面的元素还在标准流，因此会触发margin合并，但是浮动的元素并没有，位置有一定区别

下面怎么解释呢？

image-20250423152257656

当然是由于浮动不会合并margin，所以两者撞上了，就不会接着向右

image-20250423152440839

还有一个特性就是换行，当本层浮动已经满了之后，就会来到下一层，所以界面边下之后会出现

image-20250423152616341

值得注意的是，换层就像浮动一样，直接查找下一个最好的位置

6、7两个是一层，当她们都换行时，就会触发整体浮动，当跨行的时候，两者是一个整体，因此不会单独6上浮

overflow

overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。

构成的属性

这个属性是以下 CSS 属性的简写：

语法

/* 关键字值 */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

从下面列表中指定一个或者两个关键字来作为 overflow 属性。如果指定两个关键字，第一个关键字用于 overflow-x，第二个关键字用于 overflow-y。否则，overflow-x 和 overflow-y 设置为相同的属性值。

值

  • visible

    内容不能被裁减并且可能渲染到边距盒（padding）的外部。

  • hidden

    如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。

  • clip

    类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。

  • scroll

    如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。

  • auto

    取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

  • overlay 已弃用

    行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。

描述

overflow 选项包括裁减、显示滚动条，或者显示从容器流向周围区域的内容。

指定 visible（默认）或 clip 以外的值，会创建一个新的区块格式化上下文。由于技术原因，这是必要的——如果浮动包含滚动元素，它将在每个滚动步骤后强制重新包装内容，从而导致一个缓慢的滚动体验。

为使 overflow 具有效果，块级水平的容器必须有一个设定的高度（height 或 max-height）或 white-space 设置为 nowrap。

设置一个轴为 visible（默认值），而设置另一个轴为不同的值时，visible 的行为会像 auto 一样。

JavaScript 的 Element.scrollTop 属性可用于滚动 HTML 元素，即使当 overflow 设置为 hidden 时。

示例

为文本设置不同的 overflow 值

HTML
<div>
  <code>visible</code>
  <p class="visible">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>
CSS
body {
  display: flex;
  justify-content: space-around;
}

div {
  margin: 1em;
  font-size: 1.2em;
}

p {
  width: 8em;
  height: 5em;
  border: dotted;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

image-20250423160805607

评论

评论加载中……