在介绍浮动之前,有必要了解一下行内标签和块属性标签
1.行内元素:又称内嵌或者内联
内嵌(内联、行内)的特征(inline)
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解
常见的行内标签:<a> <span> <strong > <em>
2.块属性标签
块属性标签的特征(block)
1、默认独占一行
2、没有宽度时,默认撑满一排
3、支持所有css命令
常见的块属性标签:<div> <p> <dl> <dt><dd> <ol> <ul> <li> <h1-h6>
注:以上两者可以相互转换,可通过display:block/inline来完成
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我们想,如果元素可以在一行内显示,并且同时支持宽高,该如何做呢?由此,引出inline-block的概念
3.inline-block(行内的块)
inline-block 特性:
1、块在一行显示;
2、行内属性标签支持宽高;
3、没有宽度的时候内容撑开宽度
问题:
1、代码换行被解析;
2、ie6 ie7 不支持块属性标签的inline-block(校正:这个属性应该说 在IE6/7下是有兼容问题的,不过该属性的设置总是会触发hasLayout)
虽然inline-block解决了部分问题,但是在兼容性问题和代码解析的层面上还不够完善,正如上面所描述的
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
于是,浮动的概念横空出世,可以理解为完美的inline-block或者它的升级版
首先了解一下浮动的概念
浮动:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
css表示方法 float:left| right | none | inherit
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我们讲,虽然浮动可以解决inline-block的不完善处,但是浮动还是会带来其他的一些问题,为了避免因浮动而产生的浏览器兼容问题,清除浮动便显得尤为重要。
下面介绍几种清除浮动的方法,并做对比性分析
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我们可以这么理解,既然浮动使得元素脱离了文档流,可以认为是飘了起来,包含它的父级可以认为是一条松紧绳,在不存在浮动的情况下,父子均处于同一层面上,父级会
因为子级的变大而伸展开来,如果设置了浮动,那么不在同一层级上,父级便失去了约束力。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我们还要引入一个概念hasLayout,由于和下面所介绍清除浮动有一定关联,不得已拉出来单独说一下,该属性其实是IE的过时属性,存在于IE6/7 /更低版本,在IE8、IE9中,hasLayout属性已经被废弃。
当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。
我们没必要纠结在hasLayout的本质,只需了解触发它的因素,使其能够根据子级来重新渲染布局。
display:inline-block设置可以触发hasLayout
因为设定width,height本身就能激发hasLayout,对于设定了高或者高的元素,不用去管他,如果本身没有宽和高,那么我们可以通过属性zoom来激发,这个属性始终能激发,
为了避免属性值设置而产生的额外影响,一般通过zoom:1来控制,可以为放大为一倍,将不产生任何实质性的变动。
注意:IE下并不是不支持display:inline-block属性,只是在IE6/7下对块属性元素设置display:inline-block并不能像其他浏览器中那样展示,也就是说这个属性在IE6/7下是有兼容问题的,只能说支持的不够完善,不过,这个属性设置却能触发hasLayout
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1)父级加高 height:给父级设定高度
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
原理:所有代码一起浮动,就变成了一个整体,所有的元素都在同一层面上
优点:没有优点
缺点:会产生新的浮动问题。父级浮动,那么父级的父级也需要如此,直到body,显然是不科学的。
建议:不推荐使用,只作了解。
3)父级元素设定显示属性 display:inline-block
原理:对于除IE6、7之外的浏览器均是支持的,特殊就在在IE6/7下回触发hasLayout,使得在各大浏览器下都是兼容的
优点:可以做到兼容
缺点:代码换行会被解析
建议:不推荐使用,只作了解。
.clear{clear:both;}
a、直接使用<br clear="all"/>来清除 可以实现(br的固有属性)【这里违反了 结构(html) 样式(css) 行为(js) 三者分离的原则】
b、利用<br class="clear" />来清除 也可以
【注意】以上两种均需结合父级zoom:1来做到各个浏览器兼容(针对在IE下父级没有定义宽高,即没有触发hasLayout的情况下)
原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both
优点:可以做到兼容
缺点:凭空多出<br/>语义上不合适
建议:不推荐使用,只作了解。
结束加<div class="clear"></div>
【注意】这是之前主流清除浮动的方法
原理:结尾加<div class="clear"></div>
优点:可以做到兼容
缺点:凭空多出<div>语义上不合适,如果多处浮动,那么均需加空div
建议:不推荐使用,只作了解。
6) 目前主流清除浮动方法
.clear:after{content:'';display:block; clear:both;}
.clear{zoom:1;}
原理:通过伪类在结束加上空,然后清除浮动
优点:完美兼容
div{overflow:hidden;zoom:1;}
原理:overflow清除浮动
优点:可以做到兼容
缺点:当子元素高/宽大于父级时,会出现滚动条,当然如果父级大于子级,完全可以如此使用