前言
CSS中正常的流内容或者流布局虽然也足够强大，但是有时候我们希望有一些特殊的布局表现，例如，文字环绕效果，或者元素固定在某个位置，要实现这样的效果，正常的流就有些捉襟见肘。因此，CSS中有float属性，专门通过破坏正常的“流”来实现一些特殊的样式表现。当然，既然有破坏，就有保护其他元素不被破坏的clear属性，本章就来介绍 CSS的float和clear属性。
浮动是什么？
W3school中给出的浮动定义:浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的本质和特性？
浮动的本质：一句话解释，浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就 是文字环绕图片显示的效果。
浮动的特性：
- 包裹性
所谓包裹性，由包裹和自适应性两部分组成。
- 包裹:假设浮动元素父元素宽度
200px，浮动元素子元素是一个128px宽度的图片， 则此时浮动元素宽度表现为包裹，就是里面图片的宽度128px。 - 自适应性：如果浮动元素的子元素不只是一张
128px宽度的图片，还有一大波普通的文字，则此时浮动元素宽度就自适应父元素的200px宽度，最终的宽度表现也是200px。
- 块状化并格式化上下文
块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。ps：格式化上下文将在另一篇文章详细分析
- 破坏文档流
- 没有任何margin合并
浮动的作用机制
在了解浮动作用机制之前，我们首先需要了解两个和float相关的术语，一是浮动锚点（float anchor），二是浮动参考（float reference）。
-
浮动锚点:是float元素所在的“流”中的一个点，这个点本身并不浮动，就表现而言更像一个没有margin、border和padding的空的内联元素。 -
浮动参考：指的是浮动元素对齐参考的实体。
下面我们用简单的例子来理解这两个概念：
// HTML
<h1>我是一个很长的内容可以实现换行<a href="">更多</a></h1>
<h1>我是一个很长的内容可以实现换行占两行<a href="">更多</a></h1>
// CSS
a {
float: right;
color: blue;
}
h1 {
width: 150px;
border: 1px solid black;
}
效果图：
相信大家看一眼代码和效果图应该也没啥疑问了，感性认知这样写就会出现这样的效果，但是如果我问大家具体的作用机制是什么，恐怕鲜有人能回答出来。
通过最简单的例子来理解透彻背后的作用机制，相信是每个人学习的目标跟重点了，现在让我们了解下浮动的作用机制：
- 首先，我们可以将
浮动参考理解为行框盒子，浮动元素在当前行框盒子内定位。而每一个内联元素都有一个行框盒子。 - 第一张图片中由于文字比较多，分成两行显示，因此有上下两个
行框盒子，而更多是在文字最后，位于第二行。上面设置了float:right的a元素是相对于第二行的行框盒子对齐的, 然后向右浮动。 - 第二张图片中，我在标题中在多加几个字，正好两行，，如果
float元素前后全是块元素，那根本没有行框盒子,但是奇怪的是更多两字自己跑到第三行。何来的对齐说法？这里就涉及前面提到的两个概念中的浮动锚点了。 -
浮动锚点其作用可以理解为产生行框盒子，因为浮动锚点表现如同一个空的内联元素，有内联元素自然就有行框盒子，于是，float元素对齐的参考实体行框盒子对于块状元素也同样适用了，只不过这个行框盒子由于没有任何内容，所以无尺寸，看不见也摸不着罢了。
clear属性是什么？
浮动元素可能会造成父元素高度塌陷的问题，所有清楚浮动就显得非常重要了，在介绍清除浮动方式之前，首先要先了解清楚浮动的
clear属性
CSS有一个专门用来处理float属性带来的高度塌陷等问题的属性，这个属性就是clear。其语法如下：
clear: none | left | right | both
- none：默认值，左右浮动来就来。
- left：左侧抗浮动。
- right：右侧抗浮动。
- both：两侧抗浮动。
注意：
- 凡是
clear:left或者clear:right起作用的地方，一定可以使用clear:both替换！所以我们平时看到的都是clear:both这个声明比较多。 -
clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。
.clear:after {
content: '';
display: table; // 也可以是'block'，或者是'list-item'
clear: both;
}
清除浮动
方式1：利用伪元素（clearfix）清浮动
HTML结构如下，在父div上再添加一个clearfix类：
<div class="parent clearfix">
<div class="child"></div>
</div>
样式应用如下：
.parent {
border: 1px solid;
}
.child {
float: left;
width: 200px;
height: 200px;
background: pink;
}
/*开启haslayout*/
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden;
}
给浮动元素的父容器添加一个clearfix，然后给这个class添加一个:after伪元素，实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案，推荐使用。
方式2：利用clear:both清浮动
通过在父元素最后添加一个div标签，并且给他添加clear：both属性值。需要注意在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。
<div class="parent">
<div class="child"></div>
<div class='clearfix'></div>
</div>
样式应用如下：
.parent {
border: 1px solid;
}
.child {
float: left;
width: 200px;
height: 200px;
background: pink;
}
.clearfix {
clear:both
}
方式3：利用br标签清浮动
HTML结构中，在父元素里面最后加入br标签，并且添加clear=“all”属性值
<div class="parent">
<div class="child"></div>
<br clear="all">
</div>
样式应用如下：
.parent {
border: 1px solid;
}
.child {
float: left;
width: 200px;
height: 200px;
background: pink;
}
方式4：利用overflow:hidden清浮动
这种方式让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。
<div class="parent clearfix">
<div class="child"></div>
</div>
样式应用如下：
.parent {
border: 1px solid;
overflow: hidden;
}
.child {
float: left;
width: 200px;
height: 200px;
background: pink;
}
这里可以给父元素设置overflow:auto也可以，但是为了兼容IE最好使用overflow:hidden。
注意：还有一种是直接给父元素设置高度height，但是实际使用不大可能给所有的盒子加高度，也不推荐使用，知道有这种方式即可。如果感兴趣可以去查阅了解即可。
最后
希望本文对你的学习有所帮助，如果喜欢的话，欢迎点赞、关注一波。大家加油！
更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！
相关文章
- 《CSS世界》-张鑫旭
- 如何清除浮动
