码迷,mamicode.com
首页 > Web开发 > 详细

CSS float的特性

时间:2017-08-30 19:56:09      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:href   lock   div   oat   关系   宽度   图片   display   wordpress   

参考http://www.zhangxinxu.com/wordpress/?p=583 

浮动的出现:

只是用来让文字环绕图片而已(给图片加float)

浮动的两个特性:

包裹性:

浮动类似于一个带有方位的display:inline-block 属性,浮动元素不定义宽度的情况下,宽度是由内容撑开的。

破坏性:

文字之所以会环绕含有float属性的图片是因为浮动怕破坏了正常的line boxes。(我在chrome上测试float会把  图片  的display属性,从inline改变为block)

直接上个例子:

 

这里子div相当于一个图片,给 display赋值inline

 

同时可以发现display自动变成了block ,所以也不会再使用line-boxes本来的计算。(http://www.zhangxinxu.com/wordpress/?p=384这里讲了line-boxes怎么计算)

相当于这一块就是我的小王国,算我自已的,其他东西跟我不再有关系。   

CSS float的特性

标签:href   lock   div   oat   关系   宽度   图片   display   wordpress   

原文地址:http://www.cnblogs.com/zhaixingpengyue/p/7454641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!