前言

在网页设计中，我们经常需要元素在页面上按照一定的布局方式排列，这就需要我们理解如何使用 CSS 来控制元素的位置和样式。其中，浮动是一种常见的布局技术，它允许我们将元素沿页面的左侧或右侧浮动，以便其他元素可以环绕它们。

然而，浮动元素可能会导致一些布局上的问题，例如父元素无法正确包裹浮动元素的情况，这时就需要清除浮动以解决这些问题。在接下来的介绍中，我们将深入探讨浮动和清除浮动的概念、用法以及常见的技巧，以帮助您更好地掌握这两个重要的前端开发技术。

正文

css提供了三种传统布局方式（简单地说就是盒子如何进行排列顺序）

• 普通流（标准流）
• 浮动
• 定位

标准流（普通流/文档流）

所谓的标准流：就是标签按照规定好默认方式排列

1. 块级元素会独占一行，从上向下顺序排列。
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

以上都是标准流布局，标准流是最基本的布局方式。

实现多个块级元素一行内排列的方法

1. 通过行内块元素实现

但是，你会发现虽然装换为行内块元素可以实现一行显示，但是它们之间会有一些空白缝隙。

只要我们的代码不换行就可以实现没有缝隙，但是这样的代码并不优雅。

也可以通过给父容器添加font-size:0使空格消失，然后给子容器添加font-size:多少多少px防止子容器的文字消失。这样依旧发现麻烦

1. 通过float属性实现

元素之间没有产生缝隙。

浮动

在网页布局中，浮动是一种常用的技术。通过将元素设置为浮动，可以使其脱离文档流，按照指定的方向（通常是向左或向右）浮动，以便其他元素可以环绕它排列。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。

float属性应用创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 { float: 属性值}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

1. 浮动元素会脱离标准流（脱标）

   1. 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
   2. 浮动的盒子不再保留原先的位置

   在没有添加浮动的时候是这样的：

给第二个盒子添加浮动会是这样的：

1. 浮动的元素会在一行内显示并且元素顶部对齐

   浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐。

1. 浮动的元素会具有行内块元素的特性

   • 如果行内元素有了浮动，则不需要转换块级或行内块元素就可以直接给高度和宽度。
   • 如果块级盒子没有宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
   • 浮动的盒子中间是没有缝隙的，是紧挨着一起的

2. 浮动元素可以使用margin，但是不能使用margin：0 auto。

浮动布局注意点

1. 浮动元素经常和标准流父级搭配使用

   为了约束浮动元素位置，我们网页布局一半采取的策略是：

   先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合页面布局第一准则。

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

   一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

   浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动的原因

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响。
• 如果父盒子本身有高度，则不需要清除浮动。
• 清除浮动之后，父级就会根据浮动的盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法

选择器 { clear:属性值; }

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左有两侧浮动的影响

在实际工作中，几乎只用clear:both；。

清除浮动的策略是闭合浮动。

清除浮动的方法

1. 为父元素设置高度。
2. 在父元素结束之前添加应该空元素，设置clear:both。
3. 借助伪元素::after清除浮动
4. 把父容器设置为BFC容器
5. 给后面受影响的元素设置clear:both

设置父元素高度

通过设置父容器的高度来清除浮动。当父容器的高度被明确设置时，它可以包含浮动元素，从而避免布局问题。

但这种方法并不总是最理想的，因为它可能需要提前知道父容器的合适高度，而且在某些情况下可能会导致父容器高度固定，不够灵活。

在父元素结束之前添加应该空元素

最后一个浮动的子元素后面添加一个额外标签（额外标签必须是块级元素），并且为其添加清除浮动样式。

例如：

<div style="clear:both"> </div>

或者其他标签（如等）。

注意：要求这个新的空标签必须是块级元素。

优点：只需要在父元素的结尾添加一个空的 div 标签，并设置clear:both属性即可。

缺点：增加无意义标签：如果页面中有多个浮动布局，就需要添加多个空的 div 标签，这可能会导致代码结构的混乱，并且不利于后期的维护。

借助伪元素::after清除浮动

::after方式是额外添加标签方法的升级版。也是给父元素添加

.clear::after{
	content:"";
	display:block;//伪元素默认为行内元素，要转化为块级元素
	clear:both;
}

当要进行清除浮动时，只需要给父容器添加class="clear"类。

优点：可以通过类名更灵活地控制伪元素的样式和行为，便于根据不同情况进行调整；将清除浮动的相关样式集中在一个类中，使代码更有条理，便于维护和管理。

缺点：需要额外定义一个类来处理伪元素，增加了一些代码编写量。

给后面受影响的元素设置clear:both

<style>
    .box1 {
        width: 100px;
        height: 100px;
        float: left;
    }
    .box2 {
        width: 100px;
        height: 100px;
        float: left;
    }
    .box3 {
        width: 100px;
        height: 100px;
        float: left;
    }
    /* .title {
    clear: both;
    } */
</style>

<div style="background-color: blue;" class="box1">1</div>
<div style="background-color: red;" class="box2">2</div>
<div style="background-color: pink;" class="box3">3</div>
<p class="title">我是标题</p>     

在没有给p标签添加clear:both样式时

在给p标签添加clear:both样式时

把父容器设置为BFC容器

BFC容器：Block Formatting Context ---- 块级格式化上下文。

BFC的布局规则

1. 内部元素会在垂直方向，一个接一个地放置
2. bfc容器内部和外部的容器相互隔离，互不影响---解决margin重叠问题
3. bfc容器内，相邻元素垂直方向上的margin会发生重叠
4. bfc容器在计算高度时，浮动元素也参与计算 ---- 清除浮动

触发BFC的条件

1.overflow:hidden || auto || scroll || overlay

2.float:left || right

3.poistion:absolute || fixed

4.display:inline-block || inline-flex|| inline-grid|| inline-table

5.display:table-cell || table-xxx等

5.display:flex || inline-flex

小tip： BFC 解决 margin 重叠问题

当两个垂直相邻的块级元素都设置了 margin 时，可能会出现 margin 重叠的情况。但在 BFC 中，这种重叠会被阻止。

BFC 内部元素的 margin 不会与外部元素的 margin 发生重叠。

不同 BFC 之间的 margin 也不会重叠。

小结

清除浮动是网页布局中常见的技巧，用于解决浮动元素造成的布局问题。通过设置父元素高度、在父元素结束前添加空元素、使用伪元素 ::after 清除浮动、给后续元素设置 clear:both，或将父容器设置为 BFC 容器等方法，可以有效地清除浮动并确保页面布局的正确性和可维护性。