×

页面中的浮动

作者:andy0012018.05.06来源:Web前端之家浏览:385评论: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://jiangweishan.com/article/float123124124.html

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

发表评论:

最新留言

  • 访客

    谢谢楼主。。。。。。。。...

  • weblft

    表示不想加班,但是很难!!!...

  • 前端菜鸟

    也不全是我总结的哟,只是学习,大部分是来自大神的杰作。...

  • admin

    感觉不像前端菜鸟,学术很专啊,加油!...

  • admin

    可以的,底部有申请连接的。...

  • BudgetVM优惠码

    朋友交换链接吗...

  • 问我

    我...

  • admin

    是的,很难,可以笔记下来,便于查阅。...

首页|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