css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也会去复习以前的知识,这是真正会让我们有所提高的一个过程,是所谓温故而知新.那么在学习的过程中也看了很多大神的博客,这里就来总结一下我个人对于float的理解;
css的浮动使我们在布局的时候经常会用到的一个属性,在大量的使用过程中,我们可能只是一知半解的去使用,或者使用的时候得到了自己想要的结果就绝的OK了,而没有去探究它真正的实现原理,拥有这种习惯的话,我们终将会为它付出代价,当你在紧急情况下使用它的时候,难道还要去靠猜,靠试吗?当我们使用两个div是,因为div是block类型的,这里有两个div,我们不去指定宽度,只是给它们一个高度:
我们可以看到,block模块的宽度会自动的设定为width为100%,当我们给第二个绿色的div设置属性为float:left之后,我们会发现,第二个div有了宽度,这时候div就会变得像inline元素那样去自使用宽度,这也是我们要手动给浮动元素设置一个宽度的原因,那么如果我们的浮动元素中没有内容,这时候他就会小时,因为我们浮动的div中没有内容,所以它现在没有宽度没有了高度,所以就从我们当前的页面中消失了:
再来看一个例子,我们有a,b,c三个盒子,他们的宽和高都是100px,在界面中这样排列着:
浮动的元素会脱离我们原本的文档流,我们可以将文档流看成是一个一个的积木,这些积木层层叠叠的摞在一块,这时候其中的一块被抽了出去,那么中间空出来的地方就会被填补:我们给中间绿色的b框来一个float:left属性
我们发现b框将我们蓝色的框覆盖了,这时候,我们给b框一个float:right:
我们可以发现,这时候c框出来了,我们可以看到,b框从我们原先的文档流中漂浮了出去,那么他原先的位置造成的空间就有c向上补了上去,那么我们还有一个疑问,现在b框漂浮了出来,那么它会飘到哪里去呢?哪里才是它的家呢?官方上对于浮动的元素有这样一句话,浮动的框可以向左或者向右浮动,知道它边缘碰到了包含框或者另一个浮动框的边框为止,由于浮动框不在普通的文档流中,所以文档的普通流中的块状框表现的就行浮动框不存在一样,
我们给c框设置300px宽,a和c宽度为100px
从上图中我们可以看到,当b框左浮动的时候,c框向上补了b框原来的位置,所以b框和c框相互重叠了,但是我们应该也发现一个问题,就是b框虽然是漂浮了出去,但是它并没有向上进行漂浮,所以这时候我们可能回去认为,浮动的框只是
