首先,什么是浮动?
浮动是一种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传递的问题。
(别问我怎么知道这么多,我是在逆战班学的)