前言虽然CSS中普通的流动内容或者流动布局已经足够强大了，但是有时候我们想要一些特殊的布局表现，比如文字环绕效果，或者元素固定在某个位置位置，要达到这样的效果，正常的流程就有些捉襟见肘了。因此CSS中就有了一个float属性，它的目的是通过打破正常的“流动”来实现一些特殊的样式表现。当然，既然有损坏，就有保护其他元素不被损坏的明确属性。本章介绍CSS的float和clear属性。什么是浮动？W3school中对浮动的定义：一个浮动框可以向左或向右移动，直到它的外边缘接触到包含框或另一个浮动框的边界。因为漂浮物不在文档的正常流中，所以文档正常流中的块框表现得好像漂浮物不存在一样。浮动的性质和特点？浮动的本质：一句话，浮动的本质就是实现文字的环绕效果。而这种文字环绕主要是指文字环绕图片的效果。漂浮特性：包裹性所谓包裹性，是由包裹性和适应性两部分组成。封装：假设浮动元素的父元素宽度为200px，浮动元素的子元素为一张图片，宽度为128px。这时候浮动元素的宽度显示为一个包，就是128px里面图片的宽度。适应性：如果浮动元素的子元素不仅是宽度为128px的图片，而且是一大波普通文字，浮动元素的宽度会自适应父元素在200px的宽度，并且最终宽度也将是200px。BlockingandFormattingContextBlocking是指一旦元素的float属性值不为none，其显示计算值为block或table。ps：格式化上下文会在另一篇文章中详细分析。无margin合并float破坏文档流的机制在理解浮动机制之前，我们首先需要了解两个与float相关的术语。anchor），第二个是浮动引用（floatreference）。浮动锚点：是浮动元素所在的“流”中的一个点。这一点本身并不浮动。从性能上来说，它更像是一个没有margin、border和padding的空内联元素。浮动引用：指浮动元素对齐引用的实体。让我们用一个简单的例子来理解这两个概念：//HTML

我是一个很长的内容可以被包裹更多

我是一个可以用两行包裹的很长的内容more

//CSSa{float:right;颜色：蓝色；}h1{宽度：150px；border:1pxsolidblack;}效果图：相信大家看了代码和效果图就没有疑惑了。感性认知会产生这样的效果，但如果我问你具体的机制是什么，恐怕很少有人能回答。通过最简单的例子深入了解其背后的机制，相信是大家学习的目标和重点。下面我们来了解一下浮动的机制：首先，我们可以将浮动引用理解为一个linebox，浮动元素在当前linebox盒子内部的Position中。每个内联元素都有一个行框。第一张图，因为文字比较多，分两行显示，所以上下各有两个linebox，而且大部分都在文字的最后，在第二行。上面设置了float:right的a元素相对于第二行的linebox对齐，然后向右浮动。第二张图，我在title里面多加了几个字，刚好两行，如果float元素被block元素包围了，那根本就没有linebox了，奇怪的是多了两个字到第三个确定。对齐声明从何而来？这就涉及到上面提到的两个概念中的浮动锚点。浮动锚点的作用可以理解为生成一个linebox，因为浮动锚点的行为就像一个空的inline元素，有一个linebox自然有一个inline元素。所以float元素对齐的参考实体linebox对于blockshape元素同样适用，但是这个linebox因为没有内容所以没有尺寸，是看不见摸不着的。什么是清晰属性？浮动元素可能会导致父元素的高度塌陷。清除浮动非常重要。在介绍清浮的方法之前，首先要了解清浮的属性。CSS有专门的方法来处理float属性带来的高度。崩溃等问题的属性，这个属性很明确。它的语法如下：clear:none|左|对|bothnone：默认值，左右浮动。left：左反浮动。右：右侧的反浮动。both：双面防浮。注意：在clear:left或clear:right有效的地方，必须使用clear:both！所以我们通常看到的是clear:both语句。clear属性只对块级元素有效，::after等伪元素默认是内联的。这就是为什么在使用伪元素清除浮动效果时需要设置display属性的值。.clear:after{内容：'';显示：表格；//也可以是'block'或'list-item'clear:both;}清除浮动方法一：使用伪元素（clearfix）清除浮动HTML结构如下，在父div上再添加一个clearfix类：