Skip to main content

浮动

浮动的基础知识​

当给一个元素设置 CSS 属性 float: left，这个元素就会 脱离文档流，产生左浮动，也称该元素为 浮动元素，其有如下特点。

控制自身左右移动​

浮动元素可以控制其自身左右移动，但不能在垂直方向上移动元素。需要注意的是 float 不是继承属性，比如我们给一个 ul 设置了浮动，虽然整个 ul 和内部的后代元素都脱离了文档流，ul 及其内部所有元素相对于外部元素是浮动元素，但是里面的 li 在 ul 范围内并不是浮动的，想要 li 在 ul 内浮动还需要对其单独设置 float 属性。

具有类似 line-block 的行为​

无论是块级元素还是内联元素在转换为浮动元素之后，就会有如下特点：

  • 可以设置 width 和 height
  • 具有内联元素的包裹性，即如果不设置 width 和 height，那么会根据元素内容来定

影响周围元素布局​

对于正常处于文档流中的内联元素来说，比如 span：

  • 其前面存在浮动元素，该内联元素能够 "感知" 浮动元素的存在，紧挨着它在同一行
  • 其后面存在浮动元素，浮动元素会忽略其前面的内联元素，但是内联元素可以 "感知" 浮动元素的存在，于是和它紧挨着
<span style="float: left;background: black;">0</span>

<span>1</span>
<span>2</span>
<span>3</span>

上面的布局和下面的完全一致

<span>1</span>
<span>2</span>
<span>3</span>

<span style="float: left;background: black;">0</span>

对于正常处于文档流中的块级元素来说，比如 div：

  • 其前面存在浮动元素，该块级元素会忽略浮动元素的存在，会和浮动元素重叠在一起，但是块级元素内部的后代元素（无论是块级还是内联），会感知到该浮动元素的存在，因此会围绕在浮动元素周围，内联后代元素并排，块级后代元素单独占一行在其后面
  • 其后面存在浮动元素，浮动元素能够 "感知" 其前面的块级元素，因此排列在其后面
<span style="float: left;background: black;">0</span>

<div>1</div>
<div>2</div>
<div>3</div>

后面三个 div 会忽略前面的浮动元素，可以和其重叠，但是其内部的文本会感知浮动元素存在，因此会环绕在其周围

<div>1</div>
<div>2</div>
<div>3</div>

<span style="float: left;background: black;">0</span>

浮动元素遇到其前面的块级元素会 "感知" 其存在，然后排列在后面一行。

另外，浮动元素与浮动元素之间也会相互 "感知"，并排在一起。

最后我们来看一个例子：

<div class='box1'>box1</div>
<div class='box2'>box2</div>
<div class='box3'>box3</div>
<div class='box4'>box4</div>
div {
  border: 1px solid black;
  
  &.box1 {
    width: 50px;
    height: 100px;
    background: red;
  }
  &.box2 {
    width: 40px;
    height: 50px;
    background: green;
  }
  &.box3 {
    width: 80px;
    height: 30px;
    background: skyblue;
  }
  &.box4 {
    width: 65px;
    height: 70px;
    background: orange;
  }
}

这里我们从上到下放置了 4 个盒子：

当我们给 box2 设置左浮动时，box3 和 box4 会同时向上移，会忽略 box2 的占位，但是 box3 中的文本是能够感知整个 box2 盒子存在的，所以 box3 中的文本会围绕 box2：

image-20211206180600713

当我们给 box4 设置左浮动时，box4 会感知到其前方的块级元素存在，并且会排列在上一个浮动元素右侧：

image-20211206180836636

高度塌陷问题​

当我们在一个块级元素中，让块级元素的高度自适应其内容，但是我们给子代元素设置了浮动后，由于子代元素脱离了文档流，那么父级元素的高度就会坍塌变为 0。

为了解决这个问题，我们需要进行清除浮动

浮动相关属性​

float​

  • none，默认值
  • left，左浮动
  • right，右浮动

clear​

浮动的应用​

文字环绕图片​

浮动元素最常见的一个应用场景就是让文字环绕图片：

pic.nm

<div class='container'>
  <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f03379ef966c483dae4c07ae26b6abb4~tplv-k3u1fbpfcp-watermark.awebp" alt="">
  <p>
    学习flex布局需要明白”主轴“与”交叉轴“的概念，采用flex布局的元素，称为”容器“ （ flex container），它的所有子元素都是容器的”项目“（flex item），容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。学习flex布局需要明白”主轴“与”交叉轴“的概念，采用flex布局的元素，称为”容器“ （ flex container），它的所有子元素都是容器的”项目“（flex item），容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。学习flex布局需要明白”主轴“与”交叉轴“的概念，采用flex布局的元素，称为”容器“ （ flex container），它的所有子元素都是容器的”项目“（flex item），容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）
  </p>
</div>
.container {
  p { border: 1px solid black; }
  img { float: left; }
}
  1. 首先让 img 位于 p 之前
  2. 给 img 设置左浮动
  3. p 标签由于是块级元素就会忽视它前面的浮动元素，产生和 img 重叠的效果
  4. 但是 p 标签内部的文本不是块级元素，它们能够 "感知到" img 的存在，所以就会围绕图片进行排列

Reference​