开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

css知多少(8)——float上篇

简介: 原文:css知多少(8)——float上篇 1. 引言   对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。
+关注继续查看
原文:css知多少(8)——float上篇

1. 引言

  对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。

  这就是我们又爱又恨的——float。所以,系统的学一学float是非常非常重要的。除了看书和看博客文章之外,我推荐大家去看一个奇葩(声音很有磁性,你懂得)录制的教程《CSS深入理解之float浮动》,讲的很好很透彻。

2. 重新认识float

2.1.    误解和“误用”

  既然提到“误用”,各位看官就此想想,自己平日是怎么使用float的?另外,既然“误用”加了引号,就说明这样的使用并不是真正的误用,而是误打误撞使用之后,带来了真正的效果。

  这样一问大家,我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的,大部分人都这样使用,bootstrap的栅格系统也是使用了float来实现的,并且在css3被普及之前,多列布局的最佳解决方案也是使用float——要不然你就用table。

  但是,这样使用确实是对float的一种误解和“误用”,因为float被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片float:left之后,文字会环绕图片。

  

  但是,当时的多列布局和横向排版主要是依靠table实现,后来人们见见的发现,使用table将导致代码量大、混乱、不利于SEO,然后发现float+div是一个很不错的排版解决方案,于是乎——过去几年“css+div”页面排版一直是一个热门话题,也是各种高大上的面试题必考的一项。

  初学float的同学,你如果没有从最基础的知识入手,而是从网络的零散之后或者同事同学的零散代码学起的话,你可能只知道float是用来排版的,但是你却不知道float的许多个特性,这就导致了你在使用float时的许多问题。不信请看下文。

2.2.    破坏性

  首先大家来看两个demo,如下图。第一个demo是一个简单不过的例子,显示效果也很正常。第二个demo,唯一的区别就在于<img>加了float:left,上层的<div>却出现了“坍塌”现象。

  

  不过,这就是float的“破坏性”——float破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了float的元素会脱离文档流

  初次接触“脱离文档流”的朋友可以这样理解:div是父亲,img是它的儿子,原本好好的父子关系,原本爷俩可以体面的展示一个包含关系的效果。直到有一天,img被设置了float。老天爷(浏览器)规定,任何float元素都不允许再呆在自己的家族中,于是img被逐出家门,断绝和div父子关系。于是乎,div没有了img儿子,也就不能再展示这种父子的包含关系,于是两者就各过各的,互不相干。——这样一说,容易理解了吧?

  但是,永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时,文字还是会环绕在img周围的。如下图:

  

      

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

  有人可能会问:啊?你刚才不是说了float的初衷就是实现文字环绕效果吗?和破坏性有啥关系?

  这时我会反问你:如果float不让父元素坍塌,能实现文字环绕效果吗?给你两个图看看你就知道了。看不明白的可以给我留言讨论。

  

2.3.    包裹性

  “包裹性”也是float的一个非常重要的特性,大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起:

  

  如上图,普通的div如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器

  注意,此时div虽然体现了包裹性,但是它的display样式是没有变化的,还是block。

  

  说道这里咱们回顾一下,在之前的博客中,也提到了“包裹性”,是哪些样式?你可以在此思考一下,我会在博客的评论中给出答案 。

  

  知道了包裹性之后,我们还是继续思考:float为什么要具有包裹性?其实答案还得从float的设计初衷来寻找,float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解,但是如果想要让文字环绕一个div呢?此时div不被“包裹”起来,那么如何去实现环绕效果?

  道理很简单,你也可能是那种一点即通的聪明人,但是关键在于思考

2.4.    清空格

  float还有一个大家可能不是很熟悉的特性——清空格。按照管理,咱还是先举例子说明。

  

  上图中。第一个例子,正常的img中间是会有空格的,因为多个<img>标签会有换行,而浏览器识别换行为空格,这也是很正常的。第二个例子中,img增加了float:left的样式,这就使得img之间没有了空格,四个img紧紧挨着。

  如果大家之前没注意,现在想想之前写过的程序,是不是有这个特性。为什么float适合用于网页排版(俗称“砌砖头”)?就是因为float排版出来的网页严丝合缝,中间连个苍蝇都飞不进去。

  “清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。

  

  (float内容比较多,咱们分上、下两篇来介绍,这是上篇。下篇将马上发出,敬请期待)

-------------------------------------------------------------------------------------------------------------

欢迎关注我的教程:从设计到模式深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频

也欢迎关注我的开源项目——wangEditor,简洁易用的web富文本编辑器

-------------------------------------------------------------------------------------------------------------

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【HTML + CSS】模仿腾讯云页面——细节优化
【HTML + CSS】模仿腾讯云页面——细节优化
23 0
xslt转换XML为HTML遇到JS,CSS等问题
一开始把所有的内容放到一个模板里面,结果
682 0
【转】网页html+css样式各类常用小结
如内容超出单元格,则隐藏style="TABLE-LAYOUT: fixed"让弹出窗口总是在最上面: 不要滚动条? 让竖条没有: 让横条没有: 两个都去掉?更简单了 怎样去掉图片链接点击后,图片周围的虚线? 电子邮件处理提交表单 在打开的子窗口刷新父窗口的代码里如何写? window.
1632 0
分享45款高质量的免费(X)HTML/CSS模板
您可能还喜欢   60款高质量的网站模板免费下载 30个漂亮的免费 Flash 网站模板下载 最新30佳精美 PSD 网站模板免费下载 寻找网页设计灵感的27个最佳网站推荐 分享50个精美的免费 PSD 网站模板     当你需要在短时间内设计出一个网站的时候,网站模板就非常有用了。
772 0
简明 HTML CSS 开发规范
简明 HTML CSS 开发规范 作者:wjack    文章来源:蓝色理想//总论本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。
674 0
4款Windows下的免费HTML&CSS编辑器
导读:今天向大家介绍4款Windows下的免费HTML & CSS编辑器,以下是文章内容: 1. Notepad2 Notepad2是Windows下最流行的应用工具之一,是一个快速,轻量级,简洁的应用程序。
928 0
介绍html CSS和JS的定义或引用
现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) 。 浏览器解析原理 服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树;在构建DOM树的同时,如果有JS,同时调用JS引擎解析。
986 0
6种编写HTML和CSS的最有效的方法
译文出自:开源中国社区
536 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载