CSS浮动的理解及实际应用

首先，什么是浮动？
浮动是一种CSS之中的定位属性，用于控制一个网页元素能够靠左或靠右排列
浮动作为CSS当中最常用的功能之一，他主要用来实现网页中块元素与块元素之间的横向排列。我们知道块元素（如div、p标签等）在默认状态下是独占一行的，如果我们要实现两个块元素的横向排列，我们一般会先考虑浮动属性，比如这个界面
这三个图片每个都写在一个自己的div中，默认情况下他们是上下排列的。当我们给这三个图片加上“float：left；”属性时，他就会脱离文档流，靠左排列，也就会形成现在这个效果。

默认状态

浮动状态

当浮动元素过多导致父容器的宽度不能容纳所有的浮动元素时，排列不下的浮动元素将会折行重新向左或向右排列。如下图所示
浮动元素因排列不下而折行

浮动属性中单行的向左和向右可以同时设置，即给A元素一个float：left；给B元素一个float：right；时，他们会在同一行显示，A元素靠左，而B元素靠右。如下图：

A元素靠左，B元素靠右

当我们给一个元素设置浮动之后，它必然就会对后面的元素布局造成影响，而我们通常要消除这种影响，这就涉及到了一条新的CSS属性：clear。clear有三种属性，left、right、以及both。设置了clear属性的元素可以使自己不受对应浮动属性的影响，即如果你给B元素设置了clear：left；那么B元素就可以不受上一个浮动状态下的A影响，自己依然可以独占一行，如下图所示：

同理，clear：right；会消除自身受到的float：right；的影响，而clear：both；则会清除自身受到的所有浮动状态的影响。值得一提的是，浮动元素只会影响自身后面的其他元素的布局，而不会对自身前面的元素造成影响，所以，我们在需要的时候就只需要给后面的元素添加clear属性。

当给元素设置浮动后，浮动的元素会脱离文档流，此时的浮动元素不会撑开父元素的高度，也就造成了容器的塌陷，如下图所示：

我们通常的解决方法是在他的后面加一个空标签，给空标签设置一个clear：both；这样，空标签就会不受浮动元素A的影响，会定位在A元素的下方，此时父元素的高度就会被撑开，为了便于观察，我给空标签加一个蓝色的border体现一下他的位置，如图所示：

这时如果我们去掉蓝色的边框，我们就会发现这个父容器已经看起来不受A元素的影响了。注意，由于clear清除浮动属性是使被清除的元素不受到自己上面的浮动元素影响，但对于自身子元素没有清除的效果，所以这里直接给父元素加clear属性并不会生效。当然，我们在实际应用中一般不会这样进行布局，因为这种方法每清除一次浮动就要添加一个空标签，这会使问题变得复杂，我们常用的办法是在父容器加一个after伪类的属性，这会直接在父容器末尾加一个标签，我们将这个标签内容设置为空，然后再给这个标签添加clear：both；的属性，就相当于我们之前做的清浮动空标签了。但是，after伪类的标签是内联属性，我们需要先将他设置成一个块，这样我们就可以在任何想清除浮动的地方加一个这个class属性就可以了。CSS代码如下：
.clear:after{content: “”; clear: both;display: block}
此外，由于浮动元素脱离文档流，所以不会产生margin传递的问题。
（别问我怎么知道这么多，我是在逆战班学的）