请选择 进入手机版 | 继续访问电脑版

技术控

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

[其他] css之float

[复制链接]
毁我爱他你真棒 发表于 2016-10-2 21:31:32
487 13
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 ,唯一的区别就在于 <img> 加了 float:left ,上层的 <div> 却出现了“坍塌”现象。
   

css之float

css之float-1-技术控-解决方案,热门话题,图片,网络,知识

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

css之float

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

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

css之float

css之float-3-技术控-解决方案,热门话题,图片,网络,知识

  包裹性

   “包裹性”也是 float 的一个非常重要的特性,大家用 float 时一定要熟知这一特性
   

css之float

css之float-4-技术控-解决方案,热门话题,图片,网络,知识

   如上图,普通的 div 如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模式那一节也讲到过。而如果给 div 增加 float:left 之后,它突然变得紧凑了,宽度发生了变化——这就是包裹性。 div 设置了 float 之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器
   注意,此时div虽然体现了包裹性,但是它的 display 样式是没有变化的,还是 block
   知道了包裹性之后,我们还是继续思考: float 为什么要具有包裹性?其实答案还得从 float 的设计初衷来寻找, float 是被设计用于实现文字环绕效果的。文字环绕图片比较好理解,但是如果想要让文字环绕一个 div 呢?此时 div 不被“包裹”起来,那么如何去实现环绕效果?
  清空格

   float 还有一个大家可能不是很熟悉的特性——清空格
   

css之float

css之float-5-技术控-解决方案,热门话题,图片,网络,知识

   第一个例子,正常的 img 中间是会有空格的,因为多个 <img> 标签会有换行,而浏览器识别换行为空格,这也是很正常的。第二个例子中, img 增加了 float:left 的样式,这就使得 img 之间没有了空格,四个img紧紧挨着。
   “清空格”这一特性的根本原因是由于 float 会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。
  清除float

   floa t具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免 float 带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择
  先介绍两个比较简单,但是不常用的解决方法:
  
       
  • 为父元素添加 overflow:hidden   
  • 浮动父元素  
   第三种方法也不是很常用,但是大家要知道 clear:both 这个东西。通过在所有浮动元素下方添加一个 clear:both 的元素,可以消除 float 的破坏性。
   

css之float

css之float-6-技术控-解决方案,热门话题,图片,网络,知识

   接下来的第四种方法是大家最需要掌握的,也是 bootstrap 正在用的—— clearfix ——不知道的同学一定要去搜一下,要不然就太low了!
   

css之float

css之float-7-技术控-解决方案,热门话题,图片,网络,知识

   上图中,我们定义一个 .clearfix 类,然后对 float 元素的父元素应用这一样式即可,非常简单吧
   究其原理,其实就是通过伪元素选择器,在 div 后面增加了一个 clear:both 的元素,跟第三种方法是一个道理
  合理的使用float布局网页

   我们使用 float 做网页布局,是一种误解和“误用”。估计大多数人误解了 float 的原本设计初衷,但是这里的“误用”是要加引号的,因为这是一种无心插柳的应用。即,用 float 做网页布局是很合情合理的
  第一,三列布局

  博客园的主页就是经典的三列布局,很明显的左、中、右
   

css之float

css之float-8-技术控-解决方案,热门话题,图片,网络,知识

  对于这种布局,给出的布局方案是:
   

css之float

css之float-9-技术控-解决方案,热门话题,图片,网络,知识

  第二,两列布局

  以博客园一篇文章的链接为例,它分为左、右结构
   

css之float

css之float-10-技术控-解决方案,热门话题,图片,网络,知识

  对于这种布局的格式,设计方案是:
   

css之float

css之float-11-技术控-解决方案,热门话题,图片,网络,知识

  BootStrap的栅格系统

   如果您熟悉并使用 bootstrap ,那么您将不必自己去操心网页布局,因为 bootstrap 已经把网页分成了 12 列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统,就是简单看看栅格系统的实现,它是用 float 实现的
   

css之float

css之float-12-技术控-解决方案,热门话题,图片,网络,知识

   对于父元素的清除浮动, bootstrap 使用的就是 clearfix
盼巧 发表于 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
鄙视楼下的顶帖没我快,哈哈
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表