提到清除浮动我脑海中最先想到的一个问题就是:为什么要清除浮动,既然要清除浮动那么为什么要加浮动,浮动有他必须存在的理由是什么?
浮动是什么?在css中浮动对元素的定位有着不可替代的作用eg:
<div class="box" style="border: 4px solid yellow;width: 200px">
<div class="left" style="background: red;height: 100px;width: 100px"></div>
<div class="middle" style="background: pink;height: 100px;width: 100px"></div>
<div class="right" style="background: blue;height: 100px;width: 100px"></div>
</div>
这个所实现的效果如图;
如果要实现三个不同的颜色in-line,使用float是很方便的事情。
<style>
.box>div{
float: left;
}
</style>
但是随之而来的问题就出现了,高度塌陷问题,虽然float给我们带来很大的方便,同时也使元素脱离了文档流,出现我们不想要的效果。所以清除浮动是必要的。
清除float,解决高度塌陷一般有三种方法:
a:利用overflow: hidden,
b:利用clear:both;
c:利用伪类元素对清除浮动对父元素的影响。
但是这是清除float的方法都个有优缺点。
a>给父元素加一个overflow:hidden;即可,这种清除浮动的方法有一个弊端,如果需要其中一个子元素超出父元素的效果时这种方法就不适合了;
b> clear:both这种方法是在父元素里面加一个非float的块元素,在另加的块元素中加clear:both;这种方法和overflow:hidden;完全可以解决我们开发当中所遇到的高度塌陷的问题。但是这种方法也有缺陷,多加的块元素破坏了代码的语义。
c>给父元素加一个className——clearfix,然后通过伪类元素解决浮动。这种方法我也是刚刚接触,据说是最牛逼的方法。相当于给父元素添加一个虚拟的块元素,然后给块元素加clear:both;这样就解决了b中元素代码语义被破坏的问题。
.clearfix{
*zoom:1;
}
&::before,.&::after{
content: '';
display: block;
}
&::after{
clear:both;
}
不对的地方多谢指正。
清除float后父元素的效果。