深入理解CSS浮动（Understanding CSS Float）

Dante347
326 阅读5分钟

前言

在前端开发中，CSS浮动是一项重要的技术，它允许我们创建多列布局、实现文字环绕图片以及其他各种排版效果。本文将深入讨论CSS浮动的基本概念、用法、以及一些常见的问题和解决方法。

什么是CSS浮动？

CSS浮动是一种布局技术，它用于控制元素在容器中的位置。通过将元素浮动到左侧或右侧，可以使其他元素环绕它。通常，浮动元素会沿着其父容器的左边缘或右边缘对齐，并尽可能地占据空间。

最初浮动是用来解决文字的环绕效果而设计的

image.png

如何使css浮动

要使用CSS浮动，你需要为目标元素应用`float`属性，并指定一个方向，通常是`left`或`right`。下面是一个示例：

  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>

  * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 100px;
      height: 100px;
      float: left;
    }

    .item1 {
      background-color: aqua;
    }

    .item2 {
      background-color: blueviolet;
    }

    .item3 {
      background-color: greenyellow;

    }

image.png

给这几个不同颜色的块级盒子一个float:left属性，他们就会在同一行内显示

浮动元素的影响

浮动元素会影响其容器和其他元素的布局。主要影响如下：

  1. 文本环绕：当图像浮动时，文本可以环绕在图像周围，实现图文混排的效果。
  2. 多列布局：通过浮动多个元素，可以创建多列布局，如新闻网站的文章列表。
  3. 元素堆叠：浮动元素会覆盖在非浮动元素之上，可以用于创建导航菜单等。
  4. 元素脱离文档流：浮动元素会脱离文档流，可能需要使用清除浮动来避免布局问题。

浮动带来的高度塌陷

如果父元素没有设置明确的高度，并且包含了浮动的子元素，父元素的高度可能会坍缩为零。这会导致后续的内容出现在不正确的位置，覆盖在浮动元素之上。

如代码片段所示，green盒子并没有在浮动盒子的下方显示，而是被浮动的盒子覆盖了。

清除浮动

清除浮动（Clearing Floats）是一种解决使用CSS浮动元素可能引起的布局问题的技术。当元素被浮动后，其父元素的高度可能塌陷为零，导致后续元素重叠在一起。清除浮动的目的是确保父元素正确包含浮动元素，而不会影响页面布局。以下是几种常见的清除浮动的方法：

1.给父容器设置高度

高度塌陷的原因就是父元素没有设置高度，因此给父元素加一个高度自然就解决了这个问题，但是，很多情况下，父容器的高度不好设置，所以不建议使用这个方法。

2.在最后一个浮动元素后面添加新的元素，在新元素上做清除浮动

<div class="container">
    <ul class="clear1">
      <li></li>
      <li></li>
      <li></li>
      <div class="clear2"></div> //添加新元素清楚浮动
    </ul>
    <div class="text">hello world</div>
  </div>

 .clear2{
      clear:both; //清除浮动
    }

3. 在父容器伪元素after上做清除浮动

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

4.使用BFC容器

在父元素上添加overflow：auto可以让父元素变成一个BFC容器

 ul {
      overflow: auto;
    }

以上几种方法都可以解决父元素塌陷的问题，通常使用第二种和第四种方法能够更好的解决这个问题，接下来我们就来学习什么是BFC容器

BFC容器(Block Formatting Content) 块级格式化上下文

BFC，全称为块格式化上下文（Block Formatting Context），是CSS中的一个概念，用于控制和管理块级盒子的布局和排列。BFC 定义了块级元素如何在页面上定位、排列以及与其他元素互动的规则。BFC 是一种抽象的概念，它定义了块级元素的渲染规则，不会在文档结构中创建新的元素。

以下是 BFC 的主要特性和作用：
  1. 元素内部的盒子垂直排列：在 BFC 中，元素内部的块级盒子会垂直排列，一个在另一个下方，不会重叠。这使得在不同的 BFC 内部的盒子具有独立的布局，不会相互影响。
  2. 边距合并：在同一个 BFC 内的块级元素的上下外边距可能会合并，而在不同的 BFC 内，外边距则不会合并。这有助于控制元素之间的间距。
  3. 浮动元素：浮动元素会影响 BFC 内部的布局，但不会影响其他 BFC 中的布局。这使得可以在一个 BFC 中浮动元素，而不会影响到其他部分的页面布局。
  4. BFC 可以包含浮动元素：当一个元素创建了 BFC，它会包含其内部和浮动元素，这有助于防止浮动元素对外部布局的影响。
  5. 阻止外边距传递：BFC 可以阻止外边距从一个盒子传递到其父级盒子之外，从而控制外边距的影响范围。

常见创建 BFC 的方法包括：

  • 设置元素的 overflow 属性为非默认值，如 overflow: auto; 或 overflow: hidden;。
  • 设置元素的 display 属性为 table-cell、table-caption、inline-block 等，或者使用 table 和 table-row 相关的属性。
  • 使用 float 属性。
  • 使用绝对定位。

BFC 是一个有用的概念，它帮助我们更好地理解和控制页面布局，特别是在处理外边距合并、浮动元素和复杂布局时。了解 BFC 可以帮助开发者更有效地解决布局问题，确保页面的外观和排列如期望的那样。

总结

CSS浮动是实现各种网页布局需求的重要工具。通过浮动元素，我们可以实现文本环绕、多列布局和元素堆叠等效果。然而，浮动元素可能引发布局问题，因此需要谨慎使用，并学会如何清除浮动以避免这些问题。在现代网页布局中，CSS Flexbox 和 CSS Grid 等技术已经取代了浮动，但了解浮动仍然是有价值的，因为它在一些情况下仍然有用。希望本文能帮助你更深入了解CSS浮动及其用法。

avatar
文章
阅读
粉丝