什么是浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
我们来看几个例子
请看下图:当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘
请看下图: 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
请看下图:如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”
实现浮动
在 CSS 中,我们通过 float 属性实现元素的浮动。float 属性定义元素在哪个方向浮动。其可能值有:
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动
inherit 规定从父元素继承float属性的值。
清除浮动
我们先来了解一下CSS标准文档流,说白了就是一个“默认”状态。元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
但是我们在布局的时候,由于某些原因(当使用浮动、绝对定位、固定定位)会使文档脱离标准流,其中浮动会影响标准流的排列。
我们浮动的目的,就是可以把多个块级元素放到想要的一行上。
清除浮动的原因:因为浮动会影响标准流,比如浮动造成的父级高度塌陷问题
清除浮动的方法
1、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义公共类,以减少CSS代码
.clearfix:after{
content:""; /*设置内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*为了兼容IE*/
}
2、添加新的元素对其应用 clear:both
原理:添加一个空元素,利用css提供的clear:both清除浮动,让父级div能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空页面标签,造成结构的混乱。
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
//对添加的元素使用 clear:both
.clear{clear:both;}
//添加一个新元素
3、父级div定义overflow:hidden
原理:使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
4、父级div定义overflow:auto
原理:使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
5、父级定义高度height
只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题不推荐使用,只建议高度固定的布局时使用。
6、父级display设置成table
原理是将div属性变成表格,可能会产生新的未知问题,不推荐使用,只作了解。