技术控

    今日:136| 主题:49228
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] css之float

[复制链接]
毁我爱他你真棒 发表于 2016-10-2 21:31:32
248 13

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Created at 2016-08-21 Updated at 2016-10-02  CategoryFront-End   TagCSS  
  重新认识float

  误解和“误用”

   绝大多数用 float 都是为了——横向排版、或者多列布局。这样的使用是正确的,大部分人都这样使用, bootstrap 的栅格系统也是使用了float来实现的,并且在 css3 被普及之前,多列布局的最佳解决方案也是使用float——要不然你就用 table
   但是,这样使用确实是对 float 的一种误解和“误用”,因为 float 被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片 float:left 之后,文字会环绕图片。
   当时的多列布局和横向排版主要是依靠 table 实现,后来人们见见的发现,使用 table 将导致代码量大、混乱、不利于 SEO ,然后发现 float+div 是一个很不错的排版解决方案,于是乎——过去几年 “css+div” 页面排版一直是一个热门话题
   初学 float 的同学,你如果没有从最基础的知识入手,而是从网络的零散之后或者同事同学的零散代码学起的话,你可能只知道 float 是用来排版的,但是你却不知道 float 的许多个特性,这就导致了你在使用 float 时的许多问题。不信请看下文
  破坏性

   首先大家来看两个 demo ,如下图。第一个 demo 是一个简单不过的例子,显示效果也很正常。第二个 demo ,唯一的区别就在于 加了 float:left ,上层的
却出现了“坍塌”现象。
   
css之float-1 (解决方案,热门话题,图片,网络,知识)

   不过,这就是 float 的“破坏性”—— float 破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了 float 的元素会脱离文档流。
  初次接触“脱离文档流”的朋友可以这样理解:div是父亲,img是它的儿子,原本好好的父子关系,原本爷俩可以体面的展示一个包含关系的效果。直到有一天,img被设置了float。老天爷(浏览器)规定,任何float元素都不允许再呆在自己的家族中,于是img被逐出家门,断绝和div父子关系。于是乎,div没有了img儿子,也就不能再展示这种父子的包含关系,于是两者就各过各的,互不相干。——这样一说,容易理解了吧?
   但是,永远都不要忘记 float 被设计的初衷——实现文字环绕效果 。当 div 中有文字时,文字还是会环绕在img周围的。如下图:

css之float-2 (解决方案,热门话题,图片,网络,知识)

   大家现在已经知道了 float 具有破坏性,可能也有很多朋友之前就知道这一特性,但是你有没有思考一下: float 为什么会被设计成具有破坏性,为什么会脱离文档流?这一点非常重要!其实原因非常简单——为了要实现文字的环绕效果?
   如果 float 不让父元素坍塌,能实现文字环绕效果吗?
友荐云推荐




上一篇:Observational equivalence and unsafe code
下一篇:css之display
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

盼巧 发表于 2016-10-2 22:15:26
轻轻的手滑
回复 支持 反对

使用道具 举报

陈柏旭 发表于 2016-10-3 06:00:26
我只是路过,不发表意见
回复 支持 反对

使用道具 举报

我很二 发表于 2016-10-5 02:15:24
我女友不当尼姑的原因是她四级没过,庵里不收.
回复 支持 反对

使用道具 举报

额达到 发表于 2016-10-10 12:28:16
大人,此事必有蹊跷!
回复 支持 反对

使用道具 举报

深情浅爱 发表于 2016-10-24 23:43:11
学海无涯,回头是岸!  
回复 支持 反对

使用道具 举报

侯洋 发表于 2016-11-5 06:10:47
我就算是一只癞蛤蟆,我也决不娶母癞蛤蟆.
回复 支持 反对

使用道具 举报

飞绿 发表于 2016-11-7 14:41:36
very good
回复 支持 反对

使用道具 举报

劈腿年代何来真爱 发表于 2016-11-7 20:37:26
幸福毕竟不是曹操,怎能说到就到。
回复 支持 反对

使用道具 举报

小迪杰克逊 发表于 2016-11-8 05:18:24
鄙视楼下的顶帖没我快,哈哈
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表