SleeplessYE

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

 

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

 

1浮动的包裹性

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

其CSS代码如:

 

Html代码如:

 

 

2浮动的破坏性

 如文字环绕图片显示效果:

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

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

 

 

分类:

技术点:

相关文章:

  • 2021-05-16
  • 2021-10-18
  • 2022-12-23
  • 2021-10-08
  • 2021-04-10
  • 2022-12-23
  • 2022-01-16
  • 2022-12-23
猜你喜欢
  • 2021-09-29
  • 2021-09-09
  • 2021-09-29
  • 2021-11-02
  • 2021-09-29
相关资源
相似解决方案