CSS之float个人理解

本人对于前端技术之CSS，基础并不牢固，非常想恶补一番，由于工作之余的时光非常有限，目前只是零散的看过一些相关文章。希望能尽快与CSS常用类型属性相识。

 

如下我谈下对float的认识，早就听说float这家伙非常难搞，令人琢磨不透，曾经的我也是对它敬而远之，能不用就不用，尽量不去惹它。直至最近在网上偶遇，才好好的关注下他，虽以我目前的功力恐怕难以看透，我就先对其做个初步认识吧。

 

1浮动的包裹性

 其实没有必要把它想的有多复杂，float的本质是包裹与破坏，先憋开他的破坏性，它其实是个带有方位的display:inline-block(如float:left),其包裹性表现为实现宽度自适应效果，如按钮宽度自适应文字大小。

其CSS代码如：

 

Html代码如：

 

 

2浮动的破坏性

 如文字环绕图片显示效果：；

之所以有此效果是因为图片含有float属性，其破坏了其正常的lnlineboxes;

lnlineboxes不会让内容成块显示，而是排成一行，无浮动的正常情况下图片与文字排成一行，与文字基线对齐。Lnlineboxes的高度由其内部最高者决定(若图片的高度为最高，则其本身的height就等于lnlineboxes的高度)，当图片浮动后，它会脱离linebox，也就没有了高度（相对高度，其实这点我目前理解的还不是很透，待今后有深一步的理解再与大家分享），让其他linebox元素重新整合，环绕浮动元素排列。