本文的学习目标是
在引入浮动之前，我们需要了解所谓的标准文档流。
标准文档流是该元素在默认排版布局中，从左至右，从上到下。上一个元素的大小或位置会影响后续元素的排版。与定位相关的定位称为标准流。html是标准文档流的文件流
在元素的内容或两个元素之间，无论多么空格（或更改），浏览器上最终显示的只是一个空间
如果有文本，则图片在同一行，它们的高度不统一，并且浏览器页面上的最终显示与底部对齐
如果有文本和元素不能排成一行，它将自动更改。
通常，我们的元素分为块级别的元素，在线元素和线元素中。
了解标准文档流程后，让我们看一下需求（三个DIV的并排）。尽管我们将宽度和高度设置为DIV，因为DIV是一个块级别的元素，但DIV分为三行以显示三行显示的显示
目前，我们可以将DIV显示到行元素中，以使其显示在一条线中
但是您会发现相邻Divs之间存在额外的空白。这是因为两个相邻元素之间存在更改，并且更改将转换为页面上的空格显示。
但是这样写会很麻烦。如果我们现在要并排，我们该怎么做才能设置宽度和高度？我们应该让元素与标准文档流程分开
CSS中有三种方法，这使一个元素可以脱离标准文档流程：
浮动是以前非常常见的布局属性。他最初的角色是让文字包围图片。有三个属性值
漂浮：
浮动时不设置的效果
浮动后设置
我们可以看到文本具有周围图片的效果。
但是，浮动的效果远不止于此，但也可以用于布局。
当我们将元素设置为浮动时，它将
标准文档流的浮动元素的含义是，它意味着它不会占据原始的正常显示位置。更像其他元素上的“浮动”。
我们可以看到，浮动box2和box3通常显示在页面上。浮动box1是从文档流中启动的，不会占据位置。
它成为内部块元素，浮动元素将成为内部块元素
通过上述代码，我们可以发现跨度元素可以正常设置宽度和高度，并具有内部块元素的特征
设置浮动后，它将基于设置的方向
我们可以看到，当我们将Box1设置在左侧时，它会向左漂浮。
当涉及另一个浮动元件时，浮动元件将停止，并且浮动元件在遇到另一个浮动元件时会停止。这使我们可以并排显示三个div
我们将左漂浮设置为三个div，然后发现三个Div紧密连接在一起。这是因为浮动元件会在遇到另一个浮动元素时停止。这三个Div之间没有差距
浮动元素不会超过父元素的边缘
我们通过代码找到了让父级元素稍微通过边距移动。这次，将子元素设置为左侧。SUB-元素最多只能遇到父元素的边缘。此边缘不包括父元素的边界和填充值。
当父元素的宽度不足以容纳浮动子元素时，将显示以显示
在上面的代码中，当所有子元素的宽度不超过父元素时，它正常显示
当我们增加子元素的宽度或将外缘增加到子元素时。这次，如果所有子元素的大小加上边框的大小大于父元素的宽度，它将改变因为无法容纳行的宽度。
在上面的代码中，所有子元素在右侧增加。目前，您会发现第三个子元素已经下降。
浮动具有负面影响，这将导致高度的父母元素崩溃
当父 - 级元素未设置高度时。在正常情况下，父元素的高度由子元素打开
通过上面的代码，我们可以发现父元素的宽度仅设置。如果没有高度，则父元素的高度由子元素打开
当子元素漂浮时，父元素将不会通过子元素的高度打开。这是我们通常已知的高度崩溃。
在了解如何解决父元素的高度之前，我们需要了解清理
清晰属性用于删除浮动，有三个属性值
左边不允许左侧的浮动元素。Rright不允许在右侧的浮动元素。两者都不允许左侧和右侧的漂浮元素。没有一个默认值。允许浮动元素在两侧出现。父母元素继承的明确属性是官方网站的解释，以清除浮动浮动
清晰属性定义元素的元素。不允许浮动元素。
但是我实际上认为这句话还不够准确。
上面的代码有两个元素浮动。这次，如果我们正常思考。我们将一个元素添加到Box1中，以便不允许浮动元素出现在右侧。
我们可能会觉得效果就是这样
但实际上效果就是这样
为什么我们了解这里没有效果？
让我们看看另一个例子
目前，我们有三个盒子。我们想设置Box2的属性，以使浮动元素在双方都不能出现。我们想要的效果可能是这样
但是实际上，效果就是这样。您会发现双方的漂浮元素只能在左侧生效
实际上，我们应该像这样理解此属性。该属性实际上是自行起作用的。目的是影响他人，您无法通过此属性驱动其他浮动元素。您将此属性设置在自己身上，以使自己远离浮动元素。
所以第一个示例应该像这样写
我们无法通过在Box1中设置Box2驱动Box2。我们应该在Box2中设置Box1对自己的影响。这可以实现所需的效果。
在右浮动中也是相同的。我们应该在Box2中添加一个以删除Box1浮动的效果
总而言之，清晰的属性正在作用于自身。消除浮动的效果。它不仅用于清除上一个元素浮动的影响。删除浮动的效果也可用于消除效果以前的元素被其子元素浮动。
此属性通常是这样使用的
因为Box1的浮动导致Box1离开文档流，Box1不会占据位置，因此Box2移动
目前，我们可以将一个添加到Box2中，以消除Box1浮动的影响。
此方法还可以清除Box1的影响，因为它的子元素漂浮。
我们可以看到，在上面的代码中，Box1由于其漂浮而倒塌了。这次，我们可以在Box1的相同级别元素中使用清晰的属性来清除Box1的子元素在高倒塌上的影响由Box1引起
添加到Box2
设置父元件的固定高度崩溃的父元件设置的高度设置固定高度。该方法适合子元素的高度并固定，但是在实际开发过程中，该高度由内容打开
打开父元素的BFC模式后，当打开BFC时，该元素将成为独立区域，并且将有以下特征
如何打开BFC
添加一个空的div并清除父元件末端的漂浮物（不建议）
运行上述代码后，我们发现将父元素的末端添加到空的DIV中，然后清除了浮动的子元素的效果。该元素可以解决。这可以解决父母的高度问题元素。但是我们不建议这种方法。它将在页面上制作许多不必要的空标签
使用伪类 - 拆卸浮子的使用本质上与使用空的div相同。它只是用伪-Pseudo class代替空div。我们推荐的方式
首先，我们添加一个pseudo元素将其设置为“框”，然后将其设置为“”。原因是出于兼容性问题。低频IE浏览器无法将内容识别为字符串。
这就是关于浮动的解释。我们说明浮动的使用和浮动的影响。随着技术的发展，我们很少看到完全使用浮动布局的页面，因为浮动的使用非常麻烦，并且略微改变了尺寸页面上的内容将导致布局中的混乱。我们学习浮动的原因更多是要理解上一个前端页面的代码，让我们自己知道更多，并知道我们可以像这样编写页面。
原始：https：//juejin.cn/post/7097380477236936734