本人对于前端技术之CSS,基础并不牢固,非常想恶补一番,由于工作之余的时光非常有限,目前只是零散的看过一些相关文章。希望能尽快与CSS常用类型属性相识。
如下我谈下对float的认识,早就听说float这家伙非常难搞,令人琢磨不透,曾经的我也是对它敬而远之,能不用就不用,尽量不去惹它。直至最近在网上偶遇,才好好的关注下他,虽以我目前的功力恐怕难以看透,我就先对其做个初步认识吧。
1浮动的包裹性
其实没有必要把它想的有多复杂,float的本质是包裹与破坏,先憋开他的破坏性,它其实是个带有方位的display:inline-block(如float:left),其包裹性表现为实现宽度自适应效果,如按钮宽度自适应文字大小。
其CSS代码如:
Html代码如:
2浮动的破坏性
如文字环绕图片显示效果:;
之所以有此效果是因为图片含有float属性,其破坏了其正常的lnlineboxes;
lnlineboxes不会让内容成块显示,而是排成一行,无浮动的正常情况下图片与文字排成一行,与文字基线对齐。Lnlineboxes的高度由其内部最高者决定(若图片的高度为最高,则其本身的height就等于lnlineboxes的高度),当图片浮动后,它会脱离linebox,也就没有了高度(相对高度,其实这点我目前理解的还不是很透,待今后有深一步的理解再与大家分享),让其他linebox元素重新整合,环绕浮动元素排列。