CSS 系列之float 布局

介绍

float 是 CSS 属性，指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
该元素从正常文档流中移除，尽管仍然保持部分的流动性。

我们来看看 float 的语法，float 属性的值被指定为一个单一的关键字。

.float {
  float: left | right | none | inline-start | inline-end;
}

• left：表明元素必须浮动在其所在的块容器左侧

• right：表明元素必须浮动在其所在的块容器右侧

• none：表明元素不进行浮动

• inline-start：表明元素必须浮动在其所在块容器的开始一侧，在 Itr 脚本中是左侧，在 rtI 脚本中是右侧

• inline-end：表明元素必须浮动在其所在块容器的结束一侧，在 Itr 脚本中是右侧，在 rtI 脚本中是左侧

我们来看看不使用浮动时的显示

再来看看使用浮动时的样式。

来看看代码。

.main {
  border: 1px solid black;
}
.float {
  background-color: #f2cda5;
  width: 100px;
  height: 100px;
  float: left; /* 设置浮动 */
}

<div class="main">
  <div class="float"></div>
  <p>
    一、越成功、越伟大，就越该谦恭行事；二、努力工作是成就人生不可或缺的要义；三、以高目标为动力，清除不良品质；四、每天进步一点点，不断突破自己；五、成事者都追求完美。
  </p>
</div>

浮动带来的问题

高度塌陷

我们来演示一下，我们对代码进行修改，修改文案，并给每一个元素添加 border。

<div class="main">
  <div class="float"></div>
  <p>p标签</p>
</div>

• 浮动前

• 浮动后

这也就导致了，当我们想让元素从底部开始时，返回跟在了 p 标签的下面，并不是 div 的下面，也就是高度缺失。

<div class="main">
  <div class="float"></div>
  <p>p标签</p>
  <div>hello world</div>
</div>

我们添加一段代码，来看看效果。

而这可能并不是我们想要的。所以就需要我们接下来介绍的清除浮动了。

清除浮动

清除浮动，首先我们要介绍的当然是 clear 了。

.clear {
  clear: none | left | right | both;
}

当然 both 是我们最常用的属性。

• clear
  我们给底部的 div 添加 clear 属性。

.clear {
  clear: both;
}

<div class="clear">hello world</div>

看结果，我们就可以知道，浮动被清除了，从浮动格子的下面开始显示了。

• 创建 BFC

我们来看看创建 BFC 的方式。

<div class="main">
  <div class="float"></div>
  <p>p标签</p>
  <div>hello world</div>
</div>

我们在 main 中添加以下代码。

.main {
  overflow: hidden;
}

这里让 main 建立了一个 BFC，所以就出现了上面的情况，由于为把 hello world 写在了 main 下，所以会只展示这个格子的高度，与上面的 clear: both 清除浮动的方式不同。

这里不了解 BFC 的可以看我之前的文章 - BFC;

• 伪元素

给父元素添加伪元素来解决。

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

<div class="main clearfix">
  <div class="float"></div>
  <p>p标签</p>
  <div>hello world</div>
</div>

结果与 BFC 清除浮动的结果相同。

参考

MDN - float
BFC