Float浮动
浮动定义了元素在哪个方向浮动,不论被浮动的元素本身是何种元素,浮动之后都会生成一个块级框。
浮动主要是为了让页面中的元素在水平方向依次横向排列,在页面布局中非常有用。
相关属性值
值 | 描述 |
---|---|
left | 左浮动 |
right | 右浮动 |
none | 默认,元素不浮动 |
inherit | 从父元素继承float属性的值 |
没有浮动之前,所有的元素在文档的普通流中(如下图:)
某元素浮动之后,它便飘了起来,我们称之为脱离文档流。(就好比气球充满气体之后便离开地面飞了~~)
他们都是通过一种特定的条件达到了某种效果,气球通过添加气体才可以飘,那元素便是添加浮动(例如:float:left;)才可以飘。
既然它都飘了,那它便不在占据浏览器位置,那么该位置就会被该元素后面没有浮动的元素占据。注意是被没有浮动的元素占据位置哦。
这就像你在KFC,你本来在一楼就餐,结果因为楼上的某处风景(添加了float),你去了二楼就餐,那么你原来的位置就会被其他人占据,而这些占你原来位置的人都是没被楼上风景吸引的人(即没有添加float)。
下面我们具体看一下添加float属性后的效果:
<div id="father" style="border: 3px solid black;">
<div class="box1">一一</div>
<div class="box2">二二</div>
<div class="box3">三三</div>
</div>
初始div的分布状况:
当一一、二二、三三都浮动之后,我们会看到他们的老父亲(id=“father”)div没有高度了,这就是高度塌陷(解决方法之后写)。
一一、二二左浮动,三三右浮动的效果:
只给一一float之后,我们可以发现一一飘了,二二占据了他之前的位置,并且文字会环绕一一显示,不被覆盖。这个时候页面排版便产生了问题,为了整个页面的可视性,这边就会涉及到清除浮动了,我们总不能给用户两张重叠的图,让用户脑补吧。
当我给二二、三三浮动之后,会发现他们并不会到一一那一行,说明浮动之前的元素都不会受到影响。
父元素div(id=“father”)高度变小,是因为二二、三三飘了,不在一层,就不计算他们的高度了,其实还是高度塌陷的问题,解决方法之后涉及。
以上都是空间足够的一些效果显示,给他们的老父亲div添加固定宽,会发现一起浮动之时,宽度不够,放不下的元素会往下一行走,直到有足够的空间。如果最终也没有足够的空间,该元素一部分就到了浏览器页面之外,看不到了。
当然还会有高度不够被卡住的现象,我们可以自己尝试,还蛮有趣的。我就不一一展示了。
<div id="" style="border: 3px solid black;width:100px;">
<div class="box1">一一</div>
<div class="box2">二二</div>
<div class="box3">三三</div>
</div>
前面我们提到了清除浮动以及高度塌陷,这边便来讲讲这个。
float清除浮动
这里我们便来谈谈浮动之后产生的高度塌陷怎么解决,其实也就是清除浮动了的方法啦。
插播一个小知识点:
在CSS中,clear属性用来清除浮动。
语法:选择器{clear: 属性值;}
值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动影响) |
right | 不允许右侧有浮动元素 |
both | 同时清除左右两侧的浮动影响 |
插播结束,我们继续~~
Hack | 描述 | 优点 | 缺点 |
---|---|---|---|
1 | 给父元素设置高度 | 适合高度固定的页面布局 | 局限性有点大,高度自适应的不能用哦 |
2 | 父级添加overflow属性(触发BFC)。针对IE6兼容问题添加声明zoom:1; | 适合高度自适应的页面布局 | 文本内容增多容易不换行,会对溢出的内容隐藏裁剪,无法显示溢出的内容。 |
3 | 添加额外标签 | 通俗易懂 | 代码冗余 |
4 | 给父元素设置高度 | 符合闭合浮动思想,结构语义化正确 | IE6和IE7不支持:after,使用zoom:1;触发hasLayout。 |
5 | 父元素浮动 | 无 | 只能解决一个问题,并触发其他问题 |
6 | 父元素display:table; | 适合父元素宽度固定,想让若干个子元素平分宽度 | 布局不好控制,引发的问题更多,不建议使用 |
7 | 定位 | 可以实现页面效果 | 解决不了高度塌陷问题 |
(1、5、6、7从根本上算不上方法,不用在意)
具体详述hack2:
父级添加overflow属性(触发BFC),以及针对IE6兼容问题添加声明{zoom:1;}。
div{overflow: hidden; zoom:1;}
给父级(父元素或其他祖宗元素)添加overflow属性会触发父元素为BFC(BFC是块级格式化上下文,它有一条规则是:计算高度时,会计算浮动元素的高度)。
给父元素添加overflow:hidden;overflow:auto;overflow:scroll;都可以实现。但我们常用overflow:hidden;
因为auto属性值,如果内容超出,会显示滚动条,不超出则不显示;而scroll不管内容是否超出都会显示滚动栏,视觉效果上不好看。
具体详述hack3:
给浮动元素后面添加一个空标签(如:div、p、h3等)并且添加声明{clear:属性值;height:0;overflow:hidden;}
<div style="clear:both;height: 0;overflow: hidden;"></div>
注意点:(添加 height: 0; 和 overflow: hidden; 是为了避免这个空标签如果是 li 的话,在IE6和IE7上有默认高度撑着,所以要解决一下。)
具体详述hack4:
万能清除法之伪对象(伪元素)选择器 :after
给塌陷的元素添加
<div class="clearall"></div>
.clearall:after{
content: " ";
clear: both;
display :block;
height:0;
overflow :hidden;
visibility:hidden;
}
.clearall{zoom:1;}
注意点:
:after对于IE8以下有兼容问题,所以给塌陷的元素{zoom: 1; }
display: block; 因为content加进去的内容,类似添加了一个span,内容是横着排列的,那么就不会下来,也就不会把u1给撑开,所以要转成块元素竖着排列。
visibility: hidden;是为了隐藏content里面的内容。