如何清除float浮动问题？

Bennnnnnn

已于 2023-04-20 18:03:23 修改

阅读量416

点赞数

文章标签： css html css3 前端 html5

于 2023-04-20 17:54:27 首次发布

本文链接：https://blog.csdn.net/Bennnnnnn/article/details/130272347

版权

浮动（float）会导致元素脱离文档流，导致父元素高度塌陷、子元素重叠等问题。以下介绍几种解决浮动问题的方法：

使用 clear 属性

使用 clear 属性：在浮动元素的下方添加一个带有 clear 属性的空元素，如下所示：

  <style>
      .parent {
        background-color: gray;
      }

      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .float-right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
  </style>

  <body>
    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
      <div style="clear: both"></div>
      <!-- 清除浮动的代码 parent元素自动撑开（不用设置parent元素宽高大小）-->
    </div>

    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
      <div style="clear: both"></div>
      <!-- 清除浮动的代码 parent元素自动撑开（不用设置parent元素宽高大小） -->
    </div>
  </body>

使用 clear:both 来清除浮动：这种方法的原理是使用 clear 属性清除浮动，该属性可以取值 left、right、both，它表示元素盒子的顶部边缘不能与之前所有的浮动盒子的底部相邻，从而达到清除浮动的效果

使用 overflow 属性

使用 overflow 属性：为父元素添加一个 overflow 属性，将其值设置为 auto 或 hidden，如下所示：

  <style>
      .parent {
        /* width: 300px;
        height: 300px; */
        background-color: gray;
        overflow: hidden; /*hidden/auto都可以，元素大小没变，只是被隐藏了起来,parent元素设不设置宽高都没所谓*/
      }

      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .float-right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }

  </style>

  <body>
    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>

    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>
  </body>

使用 overflow:hidden 或 overflow:auto 来清除浮动：这种方法的原理是利用 overflow 属性的特性，当设置为 hidden 或 auto 时，它会自动创建 BFC（块级格式化上下文），从而可以清除浮动。

知识点补充

讲一下overflow

overflow 是 CSS 中一个常用的属性，它用于控制元素的溢出内容如何处理。
·
具体来说，overflow 属性有以下几个取值：

visible：默认值，表示不进行任何限制，允许内容超出盒子部分继续渲染。
hidden：表示隐藏溢出部分的内容，不允许滚动条出现。
scroll：表示隐藏溢出部分的内容，但允许滚动条出现，可以通过滚动条滚动查看溢出部分的内容。
auto：表示在需要时隐藏溢出部分的内容，并在需要时显示滚动条。

·
除此之外，overflow 属性还可以应用于包含块元素上，用于控制其子元素的溢出如何处理。
·
此外，overflow 属性在创建 BFC（块级格式化上下文）时也有重要作用。当 overflow 属性的值不为 visible 时，元素将创建一个新的 BFC，BFC 内部的元素布局不会影响外部元素的布局，可以解决很多常见的布局问题。

BFC（块级格式化上下文）是什么？

BFC指块级格式化上下文（Block Formatting Context），是Web页面中一个重要的渲染概念。它是一个独立的渲染区域，内部元素布局不受外界影响，可以避免一些常见的布局问题，如清除浮动、解决外边距合并等问题。
·
在BFC中，块级盒子会按照垂直方向一个接一个的放置，并且两个盒子之间的垂直间距由它们的 margin 决定，不会产生 margin 的重叠问题。同时，BFC也会阻止浮动元素的尺寸超出包含它们的盒子，从而避免了由于浮动元素尺寸过大而导致的盒子高度坍塌的问题。

创建BFC的方式主要有以下几种：

根元素（html元素）自动创建BFC
浮动元素（float不为none的元素）创建BFC
绝对定位元素（position为absolute或fixed）创建BFC
display为inline-block、table-cell、flex、inline-flex、grid、inline-grid的元素创建BFC
overflow不为visible的元素创建BFC

BFC（块级格式化上下文）会自动创建吗？

BFC不会自动创建，它是根据某些条件来触发的。一些可以触发BFC的条件包括：

根元素（即HTML元素）本身就是一个BFC；
float属性不为none；
position属性的值不为static或relative；
display属性的值为inline-block、table-cell、table-caption或inline-flex等。

·
当一个元素触发了BFC后，它的子元素会被包含在该BFC中，从而避免一些布局问题，比如浮动元素引起的高度塌陷等。

盒子高度坍塌是怎么样的？

盒子高度坍塌指的是，当父元素只包含一个或多个浮动元素时，父元素的高度会坍塌为零的现象。这是因为父元素没有包含任何非浮动元素，所以其高度自然也就为零了。
·
在CSS中，元素的高度通常由其内容的高度和其边框、内边距、外边距等属性的值决定。然而，当一个元素的所有子元素都浮动时，它们将不再占据正常的文档流，并且不会被计算在父元素的高度中。这就导致了父元素的高度坍塌为零的问题。
·
为了解决这个问题，可以使用一些方法来清除浮动，比如：

给父元素添加overflow: auto或overflow: hidden，这样可以触发BFC，使父元素包含浮动元素。
使用clearfix技巧，给父元素添加一个clearfix的类，使其包含浮动元素。
使用flexbox或grid布局，这些布局方式可以自动解决浮动问题，不需要做额外的处理。

·
通过这些方法可以避免父元素高度坍塌的问题，确保页面布局的正确性和稳定性。

使用 display 属性

使用 display 属性：将父元素的 display 属性设置为 table、table-cell 或 inline-block，如下所示：

  <style>
      .parent {
        /* width: 300px;
        height: 300px; */
        background-color: gray;
        display: table; /*超出的部分会重新计算，没有的话就按设置的初始值计算, parent元素设不设置宽高都没所谓*/
        }

      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .float-right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
  </style>

  <body>
    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>

    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>
  </body>

当父元素的 display 属性设置为 table、table-cell 或 inline-block 时，父元素会根据其内容自动计算高度，而不会受到子元素浮动的影响。因此，将父元素的 display 属性设置为这些值可以清除浮动。

例如，当父元素设置为 table 时，它会被视为一个表格，并自动计算其行高，使得子元素不会互相干扰。类似地，当父元素设置为 table-cell 时，它会被视为一个表格单元格，也会自动计算其高度。当父元素设置为 inline-block 时，它会被视为一个内联块级元素，具有块级元素的特性，同时可以水平排列。

因此，通过将父元素的 display 属性设置为 table、table-cell 或 inline-block，可以使父元素自动计算高度，并清除子元素的浮动影响，达到清除浮动的效果。

知识点补充

讲一下display

display 是 CSS 中用于控制元素如何显示的属性。它可以控制元素的盒子类型，常用的值包括：

block：将元素呈现为块级元素，会在前后添加额外的换行符，独占一行。
inline：将元素呈现为行内元素，不会在前后添加额外的换行符，多个行内元素可以在一行内显示。
inline-block：将元素呈现为行内块级元素，可以设置宽高等块级元素的属性，但是与 inline 相比可以在一行内显示多个元素。
none：将元素隐藏。

·
还有其他一些值，例如 table、flex 等可以用于实现表格、弹性布局等特定布局。
·
通过设置 display 属性，可以改变元素的盒子类型，从而影响到元素在页面上的布局和排列。

讲一下将 display 的值设置为 table 和 table-cell

将display的值设置为table和table-cell可以模拟表格布局。在使用这种布局方式时，HTML代码的语义应该仍然是表示表格数据的，而不是纯粹的样式布局。
·
将display设置为table时，元素会像一个表格一样布局，它的子元素会像表格中的单元格一样被布局。常见的表格属性（如border、cellspacing、cellpadding等）也可以被应用到这种布局方式上。设置为table-cell时，元素会被当作表格单元格来布局，可以使用表格单元格的相关属性，如vertical-align等。
·
使用这种布局方式时，需要注意以下几点：

当使用表格布局时，应该始终使用语义化的HTML元素来表示表格数据，而不是使用div和span等非语义化元素。例如，使用<table>、<thead>、<tbody>、<tr>、<th>、<td>等元素来表示表格数据。
这种布局方式仅适用于静态布局，对于动态布局并不适用。对于动态布局，应该使用Flexbox或Grid布局。
尽量避免在表格布局中使用float、position、display等会影响元素布局的CSS属性，因为它们可能会破坏表格布局的结构。

下面是一个使用表格布局的简单示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>22</td>
    <td>男</td>
  </tr>
</table>

Run：

姓名	年龄	性别
张三	18	男
李四	20	女
王五	22	男

语义化的HTML元素和非语义化的HTML元素是什么？

在 HTML 中，语义化的元素是指具有特定含义或目的的 HTML 元素，例如 <header> 表示文档或区域的页眉，<nav> 表示导航链接，<article> 表示独立的文章等等。使用语义化元素可以增强文档的结构化和可读性，使页面内容更易于理解和维护。
·
非语义化的元素则指没有特定含义或目的的 HTML 元素，例如 <div> 和 <span>。它们在页面布局和样式方面很有用，但它们并没有直接表明其内容的含义，使得页面结构不够明确。
·
使用语义化的元素可以使页面更具可读性和可维护性，同时也更有利于搜索引擎优化（SEO），因为搜索引擎可以更好地理解页面的内容和结构。

使用 CSS Flexbox 布局

使用 CSS Flexbox 布局：将父元素的 display 属性设置为 flex，如下所示：

  <style>
      .parent {
        width: 300px;
        height: 300px;
        background-color: gray;
        display: flex; /* parent元素设置了大小，那么子元素float-left和float-right的width直接被缩小成150px以适应parent元素，否则的话效果同使用clear属性 */
      }

      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .float-right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }

  </style>

  <body>
    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>

    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>
  </body>

知识点补充

Flexbox和flex布局有什么区别与联系？

Flexbox 和 Flex 布局都是用于布局的 CSS 技术，它们有些相似之处，也有些不同之处。
·
相似之处：

都是基于容器来定义布局的，而不是基于单个元素。
都可以通过 flex 容器中的 flex-items 来设置弹性盒子的布局。
都使用主轴和交叉轴来布局子元素。

·
不同之处：

Flexbox 更适合解决一维布局的问题，如行内元素的布局，而 Flex 布局则更适合解决二维布局的问题，如网格布局。
Flexbox 更加简单，易于学习和使用，而 Flex 布局则更加复杂，需要更多的实践和经验。
Flexbox 对浏览器的兼容性更好，而 Flex 布局在某些旧浏览器上可能无法正常工作。

·
需要注意的是，Flexbox 和 Flex 布局并不是互相排斥的，它们可以结合使用，根据不同的场景选择不同的布局方式。

使用 CSS Grid 布局

使用 CSS Grid 布局：使用 CSS Grid 布局可以更好地解决浮动问题，但需要对 CSS Grid 布局有一定的了解。

  <style>
      .parent {
        background-color: gray;
        display: grid; /*parent元素自动撑开（不用设置parent元素宽高大小）*/
      }

      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .float-right {
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }

  </style>

  <body>
    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>

    <div class="parent">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>
  </body>

知识点补充

讲一下Flexbox和Grid布局

Flexbox 和 Grid 布局是 CSS 中用于布局的两种强大的方式。
·
Flexbox 是一种用于在一维方向（水平或垂直）上进行布局的 CSS3 布局模块，它的主要目的是在不使用浮动或定位的情况下，让容器中的元素具有可伸缩性和对齐性。
·
Flexbox 的主要概念包括容器（flex container）和项目（flex item），容器可以设置在主轴（main axis）和交叉轴（cross axis）上的属性来控制项目的排列方式，比如主轴上的对齐方式、交叉轴上的对齐方式、主轴上的排列方向等。
·
Grid 布局则是用于在二维方向上进行布局的 CSS3 布局模块，它可以让我们更灵活地定义元素在网格中的位置和大小，而不用像传统布局那样要求每个元素都具有相同的高度和宽度。
·
Grid 布局的主要概念包括容器（grid container）和项目（grid item），容器可以定义网格的行和列，以及每个单元格的大小和位置。通过指定网格线的位置，我们可以控制项目在网格中的位置和大小，同时也可以设置跨越多个行或列的项目，实现更复杂的布局效果。
·
需要注意的是，Flexbox 和 Grid 布局都是 CSS3 新增的布局方式，不同的浏览器对这两种布局的支持程度可能有所不同，所以在实际开发中需要做好浏览器兼容性的处理。

Flexbox和Grid有什么区别与联系？

Flexbox和Grid布局都是CSS的布局模块，它们的目的都是为了更方便地实现页面的布局和排版。
·
Flexbox是一维的布局模块，它将一个容器分为一行或一列，子元素沿着这个方向排列。Flexbox通过给容器设置display:flex或display:inline-flex属性来启用。它的主要特点包括：

容器和子元素都可以指定弹性伸缩属性，包括flex-grow、flex-shrink和flex-basis。
可以通过align-items和justify-content属性来分别控制子元素在交叉轴和主轴方向上的对齐方式。
可以通过flex-wrap属性来控制子元素的换行方式。

·
Grid布局是二维的布局模块，它将一个容器分为多行多列，子元素可以放置在任何一个网格单元中。Grid布局通过给容器设置display:grid或display:inline-grid属性来启用。它的主要特点包括：

可以通过grid-template-rows和grid-template-columns属性来定义行和列的大小和数量。
可以通过grid-template-areas属性来定义子元素在网格中的布局。
可以通过grid-row和grid-column属性来指定子元素在网格中所占的行和列。
可以通过grid-gap属性来控制网格单元之间的间距。

·
Flexbox和Grid布局都具有很强的灵活性和响应性，可以很方便地实现各种布局效果。它们之间的主要区别在于：

Flexbox是一维的布局模块，Grid布局是二维的布局模块。
Flexbox适用于一些相对简单的布局场景，如导航菜单、列表排列等，而Grid布局则更适用于一些复杂的布局场景，如网格布局、响应式布局等。
Flexbox更适用于管理单行或单列中的元素，Grid布局则更适用于管理多行多列中的元素。
Flexbox具有更好的浏览器兼容性，而Grid布局的兼容性相对较差。

使用伪元素清除浮动

使用伪元素清除浮动：这种方法的原理是在浮动元素的父元素上使用一个伪元素（如:after），并在该伪元素上设置 clear 属性，从而达到清除浮动的效果。 (同理 1.clear 和 3. display)

以下是使用伪元素清除浮动的示例代码：

<!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>
      .parent {
        border: 10px solid #ccc;
        padding: 10px;
        /* 伪元素清除浮动 */
        position: relative; /* 看使用场景是否需要开定位 这里可开可不开 */
      }
      .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: #f00;
        margin-right: 10px;
      }
      .clearfix::after {
        content: "";
        display: block; /* block/table 都可以 */
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="clearfix"></div>
    </div>
  </body>
</html>

Run：

使用伪元素清除浮动

在上述代码中，使用了一个 ::after 伪元素来清除父元素中子元素的浮动效果。伪元素使用了 ::after 伪类来创建一个空的内容，由于伪元素是空的，因此需要使用 content 属性来设置其内容（占位）。通过 clear: both 规则来清除浮动元素对父元素的影响。同时，将其 display 属性设置为 block 是为了使其成为一个块级元素，从而占据一行。

clear 属性指定了元素相对于浮动元素的位置。如果一个元素被设置了 clear 属性，那么它将会被移动到浮动元素的下方，并且不允许浮动元素出现在该元素的上方。使用 both 作为属性值可以清除左右两侧的浮动元素。

由于 ::after 伪元素是默认的行内元素，所以需要将其 display 属性设置为 block 或者 table，以使其占据整个父元素的宽度，从而确保清除浮动元素的效果。

知识点补充

讲一下伪元素

伪元素是 CSS 中的一个概念，用于在元素的特定位置插入内容。伪元素通过在元素选择器后添加双冒号 (:😃 或单冒号 (😃 来定义。CSS 中常用的伪元素有 ::before 和 ::after。
·
::before 伪元素用于在元素内容前插入新的内容，常用于添加一些图标、字符或者修饰线条。
·
::after 伪元素用于在元素内容后插入新的内容，也常用于添加图标或修饰线条。
·
使用伪元素，可以不需要在 HTML 中添加额外的元素或者内容就可以实现一些效果，例如在一个元素前后分别添加箭头、添加分隔线等。

示例代码：

/* 在所有 h1 元素前添加一个 ::before 伪元素 */
h1::before {
  content: "标题：";
  font-weight: bold;
}

/* 在所有 h1 元素后添加一个 ::after 伪元素 */
h1::after {
  content: "";
  border-bottom: 1px solid black;
  display: block;
  margin-top: 10px;
}

伪元素.png

伪元素默认都是行内元素吗？

是的，伪元素默认都是行内元素。不过，我们可以通过设置伪元素的 display 属性来改变它的表现方式。比如，设置 display: block 可以将伪元素变成块级元素，设置 display: inline-block 可以将伪元素变成行内块级元素等
·
伪元素的两个要点：null and inline