×

页面中的浮动

作者:andy0012018.05.06来源:Web前端之家浏览:704评论:0
关键词:css浮动
微信公众号

微信公众号

float的意义:实现文字环绕。
浮动的本质:包裹与破坏
1.float浮动的包裹性,抛开浮动的破坏性,浮动就是个带有方位的display:inline-block属性。
display:inline-block的作用就是包裹,而浮动也有类似的效果。
2.float:left;方法与inline-block方法唯一不同的地方就是float:right;某种意义上display:inline-block属性的作用和float:left是一样的。然而float不能等同于display:inline-block;其中的之一的原因是浮动的方向性,display:inline-block;仅仅一个水平排列方向。
就是从左往右等同于float:left;,而float的可用左右排列。
3.浮动的“破坏性”,浮动是css属性中的破坏之王。要理解浮动的破坏性要从最原始的意义入手。就是?】“只是用来让文字环绕图片而已。”
结论:文字之所以会环绕float属性的图片是因为浮动破坏了正常的line boxes

css世界中,所有的高度都有两个css模型产生,一个是box盒状模型,对应css为height+padding+margin。另外一个是line box模型,对应样式为line-height。
float破坏inline-block演示

解决高度塌陷的问题 – 清除浮动

overflow + zoom方法

.fix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。不过也是有问题的,就是这个overflow:hidden是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。一般不用这个方法,只是有时候顺便去除浮动时用用。

after + zoom方法
先来简单讲讲after,可以用CSS代码生成一个具有clear属性的元素,其中的关键样式就是content了。
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了,我都是用这个样式清除浮动的,不会影响任何其他样式,通用性强,覆盖面广,很推荐。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/float123124124.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 周松松博客

    确实不会用...

  • 便宜vps

    https://www.yd631.com/(便宜vps)申请交换链接,不知可否?联系邮箱:...

  • 访客

    我是里奥梅西,现在荒的一逼!!!...

  • qlong

    mailAutoComplete插件好用。...

  • admin

    相辅相成,都可以实现TIPS提示功能,只是形式不一样。...

  • 访客

    提示插件tipso和tooltips有啥区别啊...

  • jercy

    新版网站的界面很不错~...

  • jay

    很多沟通技巧还是挺不错的。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero