CSS面试常考题：清除浮动

站长

2024年04月05日 23:38 · 阅读数 6

前言

在讲解如何清除浮动之前，我们首先得对浮动有一定的了解，下面由我给大家简单介绍一下CSS三大布局之一:浮动。

浮动

什么是浮动？

"浮动" 是一种CSS属性，用于将元素从正常文档流中移动，并使其相对于包含元素进行定位。通常，浮动用于创建多列布局或使文本环绕图像等效果。

我们都知道，两个div会显示在不同的两行，原因是因为div是块级元素，默认占据一整行。如下

<body>
  <div class="item1">1</div>
  <div class="item2">2</div>
</body>

<style>
    .item1{
      width: 100px;
      height: 100px;
      background: red;
    }
    .item2{
      width: 100px;
      height: 100px;
      background: blue;
    }
  </style>

CSS面试常考题：清除浮动

而当我们给第一个盒子加上浮动，上图会变成如下：

    .item1{
      width: 100px;
      height: 100px;
      background: red;
      float:left;
    }

CSS面试常考题：清除浮动第一个盒子浮动，脱离文本流，通俗来说就是飘起来了，类比打饭排队，前面一个人走了，后面的人就会补上去，所以第二个盒子此时在第一个盒子“下方”，被第一个盒子盖住了。而文字之所以没有移动，正是因为浮动会带来的另一个属性--文字环绕。当我们再给第二个盒子加上浮动会发生什么变化呢？他们是否会排在一行呢？

    .item2{
      width: 100px;
      height: 100px;
      background: red;
      float:left;
    }

CSS面试常考题：清除浮动正如我们所料，当两个盒子都浮动时，他们排在了同一行。这就是浮动的另一个属性--浮动元素通常会尽量排在一行（浮动可以让块级元素同行显示），在后面我们要重点讲的清除浮动可以使他们不在同一行。

为什么要学习如何清除浮动呢？

学习清除浮动是因为在使用 CSS 浮动属性布局时，会出现一些常见的问题，如元素不按预期排列、父容器高度塌陷等。清除浮动是一种解决这些问题的技术，其重要性体现在以下方面：

解决高度坍塌问题：当子元素浮动时，父容器的高度可能不会根据浮动子元素的高度自动调整，导致父容器高度塌陷。这会导致布局问题和视觉缺陷。通过清除浮动，可以确保父容器的高度能够适应浮动子元素的高度。

防止浮动元素覆盖：如果没有正确清除浮动，浮动元素可能会覆盖在页面中的其他元素之上，导致重叠和错位的问题。清除浮动可以防止这种情况发生。

维护页面布局一致性：清除浮动有助于确保页面在不同浏览器和设备上的一致性。它可以帮助你控制元素的布局，使页面在各种情况下都能正确呈现。

提高可维护性：通过采用一致的清除浮动技术，你可以更容易维护和修改网页布局，而无需担心浮动引发的问题。

支持响应式设计：在响应式网页设计中，清除浮动也起到了关键作用，可以帮助确保页面在不同屏幕尺寸和设备上正确呈现。

下面我们将重点讲解如何清除浮动，浮动在面试中一般不会考，因为他本身太过于简单了，而清除浮动却是面试中的常考题，让我们一起去看看如何清除浮动吧。

清除浮动

清除浮动有五种常用的方式，其中最后一种在我们的日常生活中使用的最多。

给父容器设置高度。
在最后一个浮动元素后面添加新的元素，在新元素上做清除浮动。
在容器的伪元素after上做清除浮动。
在下方被浮动影响的容器上做清除浮动。
BFC容器

下面我将通过案例来分析五种清除浮动的方法。

未清除浮动前源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }

    li:nth-child(1){
      background: red;
    }
    li:nth-child(2){
      background: blue;
    }
    li:nth-child(3){
      background: green;
    }
    .text{
      width: 150px;
      height: 200px;
      background: rgb(113, 66, 195);
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="text">
      Hello World！
    </div>
  </div>
</body>
</html>

效果图： CSS面试常考题：清除浮动

上述代码将会带了浮动所造成的问题，由于ul里面的三个li都设置了浮动，导致其父容器的高度发生坍塌。

CSS面试常考题：清除浮动原本高度为200px的text容器直接被ul盖住了，这显然并不是我们想要的效果，我们想要的是text容器在ul的下方，下面来介绍五种方法解决这个问题。

第一种：给父容器设置高度

在style标签内加上：

ul{
    height:100px;
}

效果如下：

CSS面试常考题：清除浮动

第二种：在最后一个浮动元素后面添加新的元素，在新元素上做清除浮动

1.在最后一个li标签后面加上：

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

2.在style标签内加上：

.clear{
    clear: left;
}

清除后效果如下：

CSS面试常考题：清除浮动

第三种：在容器的伪元素after上做清除浮动

利用伪元素after清除浮动，并单独写一个.clear类，要给哪个标签清除浮动就给其父容器加上这个类名。代码如下：

// 在style标签内加上
.clear::after{
      content: '';
      clear: both;
      display: block;
}

// 并给ul添加这个类
<ul class="clear">
      <li>1</li>
      <li>2</li>
      <li>3</li>
</ul>

五种方法的运行效果都一样，这里就不再展示出来了。

第四种：在下方被浮动影响的容器上做清除浮动

这种方法很不地道，因为自己造成的浮动交给别人来解决，总是不合适的吧，哈哈哈。具体解决措施：在被li浮动影响的.text容器上做清除浮动。

.text{
      width: 150px;
      height: 200px;
      background: rgb(113, 66, 195);
      /* 三个li自己不努力，那text只能自己努力清除浮动了 哈哈哈 */
      /* 但不推荐 不符合人类逻辑思维 自己的浮动应该自己清除 */
      clear: both;
}

第五种：BFC容器（Block Formatting Context 块级格式化上下文（最常用的）

为什么这种方法是最常用的呢？
1. 简单易用：只需为父容器添加一个CSS属性，不需要额外的HTML元素或伪元素。
2. 兼容性良好：这种方法在大多数现代浏览器中都能正常工作。
3. 能够解决浮动引起的高度坍塌问题，确保父容器能够包含浮动元素。

虽然其他方法如添加空的清除浮动元素或使用伪元素也有效，但使用 overflow 属性通常更为常见和便捷，特别是在需要解决常见的浮动问题时。

下面简单介绍一下BFC：

何为BFC容器？

BFC 是块级格式化上下文（Block Formatting Context）的缩写，是一个在 HTML 和 CSS 中用来控制和规定块级元素如何布局的概念。BFC 定义了块级元素在文档流中如何摆放和相互影响的规则。每个 BFC 包含一组块级盒子，它们在垂直方向上一个接一个地排列，相互之间不会重叠。

BFC容器特点：

BFC容器在计算高度时，会将浮动元素的高度也计算在内
解决内外margin重叠问题

哪些属性可以创建BFC ？

float:left || right;
position: absolute || fixed
display:inline-block; （创建BFC，也不会使元素脱离文本流）
display:table-cell.... 大部分属性都可以
overflow:hidden(超出则隐藏) || auto（超出则自适应） || overly（超出则覆盖） || scroll（超出则滚动）

介绍完了BFC容器的特性，虽然BFC与浮动元素的交互方式有关，但不是所有BFC容器都被用来清除浮动。BFC是一种用于规定元素如何在文档中布局和定位的规范，它的主要作用是控制盒模型，其中包括浮动元素的交互方式。BFC主要用于解决浮动元素可能引发的问题，但它本身不是用来清除浮动的方法。我们一般只用其中的部分属性来实现浮动的清除。如下：

在上述代码中的container容器中加上以下属性：

/*第一种： */
.container{
    overflow:hidden; /* 或 overflow: auto; */
}

/*第二种： */
/*这会使`<ul>`表现得像内联元素，同时也会使其成为一个BFC。*/
ul {
   display: inline-block;
   vertical-align: top; /* 可选，将 .text 顶部与 ul 顶部对齐，不对齐的话会有间隔 */
}

留言

如果以上内容对你有些许帮助，还请劳烦给博主送一个小心心♥(ˆ◡ˆԅ)，有错误欢迎指出哦。