漂浮有什么作用？它们如何影响相关元素的盒子模型？浮动元素与内联元素有何不同？制定浮动元素位置的具体规则是什么？clear属性是如何工作的，它有什么作用？即使是经验丰富的开发人员也会在使用浮动时犯错，因此了解浮动的行为可以让您免于使用CSS时遇到的很多麻烦。即使您认为您已经了解关于浮点数的所有知识，我们也会深入到您可能学到新东西的地步。什么是浮动？CSS中的某些元素是块级元素，它们会自动启用新行。例如，如果您创建2个单独的单词段落元素，它们将不会相互流入，而是各自出现在单独的一行中。另一种元素是内联元素，它们与之前的内容保持“在线”显示。例如，有一个锚标记，它可以像段落一样出现在元素内部，而不会导致任何额外的空白或开始一个新行。更改此布局模型的一种方法是使用浮动，它允许给定元素滑动到其行的一侧，而其他内容向下流动。向右浮动的元素将被推到其容器的右侧，内容将沿其左侧向下流动，浮动元素将被推向左侧，内容将沿其右侧向下流动。一个典型的例子是，当您将图像放入段落中并希望两个图像并排出现而不是堆叠出现时。首先我们用HTML创建两个元素：
Loremipsum...
光是这样并没有出现我们想要的效果.段落元素是一个块级元素，它有自己的一行，因此段落和图像出现在正常的文档流中。我们可以通过将图像向右浮动来更改显示。这个CSS非常基础：img{float:right;margin:20px;}使用这段代码，我们的图像将移动到其行的右侧，而段落文本将向下排列到其左侧。有趣的是，当这张图片浮动时，我们的其余内容将尽可能地环绕它。如果我们改变容器的大小或缩小浏览器窗口，文本将简单地重新排列，而不会触及图像。这个盒子是如何工作的可能你已经很好地理解了这个行为。然而，要充分利用浮动，您需要更深入地了解这两个元素之间的相互作用。例如，我们如何在段落和图像之间添加额外的空白？您可能认为p{margin:20px;}会起作用，但是，这不会在图像和段落之间创建一个像素的额外空间。相反，我们为图像应用这些边距：img{margin:20px;}你应该问自己这个问题，“为什么？”为什么增加段落的边距不会增加图像和段落之间的边距？因为我们没有掌握属于段落的盒子模型。如果您从根本上想知道您的布局是如何工作的，请尝试应用一两个边框，看看会发生什么。如果我们在这个段落上这样做，结果可能会让你大吃一惊，p{border:solid1pxblack;}如你所见，图像实际上在段落的框内！这就解决了我们的边框空白混淆。我们添加到段落的任何空白都会应用到图像的右侧，这就是图像和段落之间没有添加空白的原因。如果我们想改变这种行为，让段落不再包围图片，我们可以将段落向左浮动，并给它指定宽度（不指明宽度，段落会100%宽，不会放在下一个到图像）。疯狂的浮动规则现在我们知道浮动的作用以及它如何影响所涉及元素的框。让我们继续讨论许多开发人员可能不理解的另一条信息：控制浮动元素位置的规则。通常开发人员使用浮动来控制列表项在图像集或功能列表中的位置。让我们创建一个简单的仅包含图像的列表，看看它是如何工作的。
默认情况下，所有列表项都以大号显示垂直堆栈，这意味着它们是块级元素。尽管图像是行内元素，但它们由其父级块级元素列表项控制。为了解决这个问题，我们需要将列表项向左浮动。当一行中的多个元素浮动时，它们与内联元素的流动具有类似的效果。但是，正如我们所看到的，存在一些关键差异。li{浮动：左；margin:4px;}现在，这只是一个非常常见的例子，如果我们所有的图像都是相同的高度。结果看起来像是一组简单的从左到右排列的图像：然而，我们的图像高度并不完全相同，有些是100像素高，有些是150像素高。这可能会产生非常奇怪的结果。我第一次看到这个结果时很困惑。这个世界到底发生了什么？为什么右图4是这样的？它不应该尽量让自己漂浮到最左边吗？如果我们去掉这些列表项的浮动，改用display:inline，结果就大不一样了。li{display:inline;}此示例与原始示例的不同之处在于图像默认情况下沿其底部边缘垂直对齐。这会使它们看起来与前面的示例有很大不同，但我们可以用一行CSS来解决这个问题：img{vertical-align:top;}现在它看起来更像float示例，只显示可预测的顺序内联列表项.当x轴没有空间容纳下一项时，它会退回到下一行的左侧。那么，为什么我们的浮动画廊没有这样显示呢？为什么浮动列表项由奇怪的巫术控制？九条规则事实证明，CSS规范列出了九条管理浮动行为的规则。这个清单的问题是，即使写出来，也只有无聊的人才看得懂。这是其中一条规则的引用：“如果当前框是左浮动的，并且源文档中的早期元素生成了任何左浮动框，那么对于每个这样的早期框，要么“当前框必须位于先前框的右外边缘的右侧，或者其顶部必须低于先前框的底部。类似的规则适用于向右浮动的框。”也许你的阅读理解比我想的要强，但是这个和其他的规则让我头晕目眩。左外缘在右外缘右边的说法都是很老生常谈的，听起来很复杂。对于方便起见，JoshJohnson将浮动性能翻译成英文总结了九个规则，看起来简单了一点。浮动元素被推到其容器的边缘。任何浮动元素将出现在其前一个浮动元素的旁边或下方。如果元素都向左浮动，则第二个元素将出现在第一个元素的右侧，如果全部向右浮动，则第二个元素将出现在第一个元素的左侧。左浮动框不能出现在右浮动框的右侧。浮动元素不能高于其容器的上边缘（这在折叠边距方面更加复杂，请参阅原始规则）。浮动元素不能高于前面的块级元素或浮动元素。浮动元素不能高于前一个内联元素。与另一个浮动元素相邻的浮动元素不能超出其父容器的边缘。浮动框必须放置得尽可能高。左浮动的盒子必须尽可能放在左边，而右浮动的盒子必须尽可能放在右边。最高可能位置的优先级高于左右。我们可以将其中大部分视为常识，但也需要明确说明，以便每个人在每个浏览器上看到相同的页面。基本上，这种情况的要点是浮动元素将被分配到特定的边缘（左或右），没有太多要求。除非在它之前有另一个浮动元素，否则它将与那个浮动元素相邻。真正让我们感到困惑的是最后一条规则，它规定浮动元素尽可能保持在高处，并且在将元素推到边缘时，垂直定位规则优先于水平左右规则。在我们之前的示例中，2号图像拉伸了行的高度，以便在3号图像之后仍然有一些垂直空间供4号图像挤进??去。即使考虑到这些规则，该图案也不容易预测。请记住，当您有一个浮动元素时，下一个浮动元素必须至少占据与前一个浮动元素一样多的垂直高度才能打破线条并向下移动流。浮点数的顺序关于我们在这里提出的规则的最后一点。规则2对那些浮动元素有有趣的影响。假设我们有六张一到六的数字图片，如下：
如果我们将这些图片向左浮动，它们会按顺序出现，从头到六，从从左到右，从上到下。但是，如果我们将这些图像向右浮动。如您所见，第一张图片位于最右侧。同样，当换行时，第四张图片也放在右边。这就是为什么您很少看到人们将导航元素浮动到右侧的原因。创建这样的螺旋顺序需要对HTML结构进行不受欢迎的更改才能解决。ClearFloatsFloats对于做一些布局很有用，比如创建内容栏。但是，一旦声明了浮动，它们就会对文档的其余部分产生影响，您可能喜欢也可能不喜欢。例如，我们想在前面提到的左浮动列表块之后添加一个段落。结果可能不是你所期望的：这里的结果是使用了clear属性，这样它所应用的元素的给定一侧就不会出现浮动元素。例如，如果我们将clear:left.ulli:nth-child(2){clear:left;}添加到我们的小画廊列表的第二项，此代码告诉浏览器第二项的顶部必须在他在任何左浮动项目（在本例中为第一个项目）的底部下方。如果我们将所有元素向右浮动，我们将使用clear:right。请注意，在此之后，剩余的浮动元素将保持其位置。由于它们仍然向左浮动，因此清除该属性并不会取消它们的行为。这意味着我们的问题不能通过清除列表中任何一项的浮动来解决。相反，必须清除的是段落元素，它是一个非浮动的块级元素。这将确保它出现在浮动元素下方而不是旁边。p{clear:both;}从技术上讲，我们只需要清除此处的左侧浮动，但当开发人员想要确保清除所有浮动时，通常会看到将两者都设置为clear。这个改动可以很好的解决我们的问题。浮点数和清除浮点数的怪癖当给定元素仅包含浮点数时，会出现一种奇怪的行为：父元素的高度折叠。为了说明，假设我们要为所有示例中的无序列表提供背景颜色。如果列表元素不是浮动的，我们只需要应用CSS添加背景即可。ul{background:gray;}如您所见，定义无序列表的框已变成灰色，列表中的每个项目都堆叠在一起。但是，在第二个示例中，我们浮动了所有列表项，UL仅包含浮动元素，导致其高度塌陷，这会让新手开发人员对其背景颜色发生的变化感到惊讶。有几种方法可以解决这个问题，最简单最简单的方法是为无序列表的父元素显式指定高度。ul{height:300px;}如您所见，这确实允许我们的背景重新填充。但是，如果高度是根据内容自动计算的，从长远来看，这不是一个理想的解决方案。如果我们要将三个或更多图像添加到列表库中，高度将不够。为了解决和清除浮动，术语clearfix，也叫clearfix，开始发挥作用。clearfloats通过使用clear属性解决了高度塌陷的问题。开发人员在他们的HTML中创建一个与浮动元素同级的空元素（通常是div），然后将一个名为clearfix的类添加到空容器中。让我们回到CSS，将清除浮动的属性添加到clearfix。.clearfix{clear:both;}立即解决了高度塌陷问题：根据我们所学的，我们可以看到为什么这种方法可以解决我们的问题。高度塌陷的原因是父元素只有浮动元素，现在它有一个子元素，虽然子元素是空的，但不是浮动的，所以高度又按预期自动生成了。这种方法的问题是没有人喜欢HTML中额外丑陋的元素。它根本不是语义的，这意味着它没有清楚地传达页面的层次结构。新的解决方案是利用overflow属性，它控制超出其包含框边界的内容的功能。如果将父项目的overflow设置为hidden或者auto，也可以解决高度塌陷。ul{overflow:auto;}这绝对是高度塌陷问题最简单优雅的解决方案，应该是你的解决方案。话说回来，在某种情况下，你想把元素的溢出设置为可见，怎么办呢？这个结果可以使用NickGallagher的tinyclearfloathack来实现，它使用了一些CSS天才来解决这个问题。首先，他使用:before和:after添加了一些内容，我们可以利用这些内容为父元素创建一些非浮动元素。但是，你不想在这里使用真正的内容，所以我们把它设为空，并设置display为table来创建一个匿名框（空的，不占用空间），最后使用我们的老朋友clear。它创建一个不可见的块级元素来解决高度折叠问题，而无需添加额外的HTML。旧版本的IE需要自行修复。/*对于现代浏览器*/.cf:before,.cf:after{content:"";display:table;}.cf:after{clear:both;}/*ForIE6/7(triggerhasLayout)*/.cf{zoom:1;}结论在这篇文章中，我们讨论了很多信息，包括基本的和复杂。我们首先讨论浮动如何工作以及它们如何在基本级别上工作，然后在元素上设置浮动如何影响元素所涉及的框边框，让您弄清楚它是如何工作的以您想要的方式获得边距.然后我们讨论了浮动元素的基本规则，并得出了一些有趣的结论，关于不同高度的浮动元素如何定位，以及右浮动元素如何以相反的顺序出现。如果在阅读本文之前您对浮动感到困惑，请开始阅读。他们从一开始就让我们感到困惑。希望您现在了解浮动的工作原理以及如何使用它们来实现您想要的布局。如果您觉得此信息有帮助，请在下方发表评论让我们知道。
