浮动简介

基本概念

标准流：是元素排列的默认状态，块级元素从上到下排列，行内元素从左到右排列。

块元素：元素独占一行，默认宽度为父元素的100％，可以设置宽度和高度。

行内元素:元素在一行内排列直到排满了自动换行，不可以设置宽高，宽高由内容决定。

inline-block：在一行内显示并且可以设置宽高。

浮动是什么

浮动会使得元素脱离标准流，向左或向右”漂浮“起来，直到遇到父元素的边框或者一个浮动着的元素的边框为止。

脱离标准流的浮动元素怎么排列

它不再按照默认的状态排列，会向左或向右靠，直到找到父元素的边框或正在浮动的元素的边框。

浮动之前的排列

三个盒子都向左浮动的排列

可以看出，没有浮动之前，块元素在标准流中是独占一行从上往下排列的。而浮动之后，块元素就“漂浮”起来，直到找到父元素的边框或浮动着的元素的边框，就不再往左（右）靠。box1找到了父元素的边框，box2找到了正在浮动的box1边框，box3找到了box2的边框。

浮动会带来什么影响

浮动元素脱离标准流之后，排在它后面的元素不知道它的存在，所以在标准流中的普通元素会占据它的位置，发生重合。同理，包含它的父元素如果高度是自适应的（没有设置高度，由内容撑开），由于检测不到它，所以没有它的高度，会出现高度塌陷的现象。

元素重合

这里给box1添加的float：left的样式，box2和box3没有浮动。可以看到，灰色的box2不见了，是因为box1浮动后脱离了标准流，box2和box3仍在标准流中正常排列，它们看不到box1的存在，所以就占据了它的位置。

父元素高度塌陷

这里给box1，box2，box3都设置了左浮动，并取消了父元素的高度设置。浮动元素脱离标准流之后，包含它的父元素也看不到它了，当父元素的高度有里面的内容撑开时，父元素无法获得浮动元素的高度，就会出现高度塌陷，若父元素内所有元素都浮动起来，父元素就没有高度了。

那浮动有什么用

细心观察元素重合时的现象会发现，盒子里的文字并没有被浮动起来的元素挡住，如下图。

文字没有和浮动元素重合

利用这一特性，我们可以让文字环绕着它。

实际上浮动一开始是用来做文字环绕图片的，当我们给图片设置浮动，图片会脱离标准流，周围的文字就会挤向它，就围绕着图片排列了。为什么文字不会像其他元素一样占据它的位置发重合呢？浮动设计出来就是为了让文字环绕它而别的元素不能环绕它，浮动元素仍然会占据文本空间，因此文本元素可以检测到它，其他元素检测不到它。

浮动可以使元素具有inline-block的特性，使得块级元素可以在一行内排列，所以也会用来做布局。

怎么解决浮动带来的影响

首先我们要知道浮动元素会使得后面的元素挤向它，之前的不受影响。所以要在影响后面元素的浮动元素清除浮动，让后面的元素可以检测到它，不占据它的位置。还有，让父元素也可以检测到它，把它的高度值包含在内。这样，浮动既达到了目的又不影响后面的元素，皆大欢喜。

清除浮动

清除浮动之前，了解一下清除浮动的语法

clear：left

左侧抗浮动，只对自身元素有影响，清除元素左边的浮动。注意：不是让它不浮动，是让它的左边不允许有浮动元素。

还有right，both，none都同理就不一一说了。

清除浮动之前

此时，三个元素都设置了左浮动，box1贴着父元素的边框，box2贴着浮动元素box1的边框，box3贴着浮动元素box2的边框。

清除box1的左浮动

在box1的样式中清除左浮动后，由于它左边框没有任何浮动元素，所以不起作用。

清除了box2的左浮动

在box2的样式中清除左浮动后，由于box2左边框是具有浮动属性(不为none)的元素box1，box2不再允许左边有这样的元素，所以它会另起一行显示。

清除了box3的左浮动

box3同理。

清除浮动之后带来的好处

从上面的例子可以看出，元素清除浮动后，不允许左边或右边有浮动元素的存在，所以它不会越过浮动元素的边框，占据浮动元素的位置，就不会发生重合了。clear清除浮动的目的已经达到了，它只是让自己的左边或右边没有浮动的元素。但我们会发现，父元素仍然是高度塌陷的，清除浮动之后父元素仍然无法检测到它的高度。因为clear仅仅是让它自身的左边或右边不存在浮动元素而已。那我们怎么让父元素把浮动起来的元素包含在内容中撑起父元素的高度呢？

如何解决父元素的高度塌陷问题

让浮动的元素继续浮动而不去清除最后一个浮动让它掉下来被父元素发现然后包含进去。这时我们就需要有其他元素充当这个角色(被父元素检测到包含进去计算高度)

具体做法

1.在父元素末尾添加一个空的块级元素，也就是浮动元素的兄弟元素，父元素就知道里面有内容了，会给这个空元素留位置。实际上这个空元素的高度是零呀，父元素即使要给它留位置也只能留0个单位值，相当于没有。那这个空元素有什么作用呢？给空元素添加清除浮动试试。

空元素清除浮动后

现在，父元素检测到高度了。这是因为，空元素就和我们上面清除的浮动一样，它不允许左边或右边存在浮动元素，因此它会另起一行显示，如果它有高度或内容的话，就会像下面一样，设置了黑色的背景颜色以及2px的高度。我们当然不希望它显示出来，所以它的内容是空的也没有任何样式，只是帮我们清除浮动而已。这时候，父元素就可以知道内容的高度了，这样，父元素的高度就被撑起来了。

空元素的位置

2.使用css3的after伪元素清除浮动(该伪元素是在元素内容最末尾默认嵌套的一个元素)，原理和第一种方法相同。

其中，要在伪元素添加内容设置的样式才生效。设置高度是因为设置的内容会撑开一定的高度，父元素会包含这个高度。把内容设置成不可见的否则影响美观。设置成块元素因为要把父元素的所有内容包含进去，这样才会有高度，否则行内元素无法包含浮动元素，父元素就不能计算实际内容的高度了。准备工作做好之后，就可以像第一种方法那样清除浮动了。

样式代码展示

把样式应用到塌陷的父元素中

把样式单独声明出来而不直接在父元素内设置样式是因为也许整个页面还有多处需要解决高塌陷的问题，到时候直接添加类属性就可以了。

3.在包含浮动元素的父元素中添加overflow属性隐藏（只要不是visible）起来。

严格来说它并没有清除浮动，而是触发了块格式化上下文（BFC），简单来说这里BFC会创建一个隔离的区域，把浮动的子元素也包含进去，不会受外界的影响同时也不会影响外界。所以父元素得到了浮动元素的高度，就不会出现高度塌陷的问题。但是，如果父元素所包含的元素中，有不浮动的普通元素，它仍然会挤向正在浮动的元素并且发生重合。这就可以看出来，BFC并没有清除浮动。实际上元素重合和父元素塌陷是两个问题所在。

这里做个小结

以上的三种方法中，方法一和方法二实际上原理相同，都是在父元素的最后一个元素清除浮动，这个元素告知父元素里面还有内容需要显示相应的高度，至于高度是多少是由清除浮动元素的最后占位决定。方法三是让父元素包含浮动元素，从而把浮动元素及其它元素的高度计算进去，并没有去清除浮动。