css之float
Created at 2016-08-21 Updated at 2017-01-06 Category Front-End
重新认识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>
却出现了“坍塌”现象。
不过,这就是float
的“破坏性”——float
破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了float
的元素会脱离文档流。
初次接触“脱离文档流”的朋友可以这样理解:div是父亲,img是它的儿子,原本好好的父子关系,原本爷俩可以体面的展示一个包含关系的效果。直到有一天,img被设置了float。老天爷(浏览器)规定,任何float元素都不允许再呆在自己的家族中,于是img被逐出家门,断绝和div父子关系。于是乎,div没有了img儿子,也就不能再展示这种父子的包含关系,于是两者就各过各的,互不相干。——这样一说,容易理解了吧?
但是,永远都不要忘记float
被设计的初衷——实现文字环绕效果。当div
中有文字时,文字还是会环绕在img周围的。如下图:
大家现在已经知道了float
具有破坏性,可能也有很多朋友之前就知道这一特性,但是你有没有思考一下:float
为什么会被设计成具有破坏性,为什么会脱离文档流?这一点非常重要!其实原因非常简单——为了要实现文字的环绕效果?
如果float
不让父元素坍塌,能实现文字环绕效果吗?
包裹性
“包裹性”也是float
的一个非常重要的特性,大家用float
时一定要熟知这一特性
如上图,普通的div
如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模式那一节也讲到过。而如果给div
增加float:left
之后,它突然变得紧凑了,宽度发生了变化——这就是包裹性。div
设置了float
之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器
注意,此时div虽然体现了包裹性,但是它的display
样式是没有变化的,还是block
知道了包裹性之后,我们还是继续思考:float
为什么要具有包裹性?其实答案还得从float
的设计初衷来寻找,float
是被设计用于实现文字环绕效果的。文字环绕图片比较好理解,但是如果想要让文字环绕一个div
呢?此时div
不被“包裹”起来,那么如何去实现环绕效果?
清空格
float
还有一个大家可能不是很熟悉的特性——清空格
第一个例子,正常的img
中间是会有空格的,因为多个<img>
标签会有换行,而浏览器识别换行为空格,这也是很正常的。第二个例子中,img
增加了float:left
的样式,这就使得img
之间没有了空格,四个img紧紧挨着。
“清空格”这一特性的根本原因是由于float
会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。
清除float
floa
t具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float
带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择
先介绍两个比较简单,但是不常用的解决方法:
- 为父元素添加
overflow:hidden
- 浮动父元素
第三种方法也不是很常用,但是大家要知道clear:both
这个东西。通过在所有浮动元素下方添加一个clear:both
的元素,可以消除float
的破坏性。
接下来的第四种方法是大家最需要掌握的,也是bootstrap
正在用的——clearfix
——不知道的同学一定要去搜一下,要不然就太low了!
上图中,我们定义一个.clearfix
类,然后对float
元素的父元素应用这一样式即可,非常简单吧
究其原理,其实就是通过伪元素选择器,在div
后面增加了一个clear:both
的元素,跟第三种方法是一个道理
合理的使用float布局网页
我们使用float
做网页布局,是一种误解和“误用”。估计大多数人误解了float
的原本设计初衷,但是这里的“误用”是要加引号的,因为这是一种无心插柳的应用。即,用float
做网页布局是很合情合理的
第一,三列布局
博客园的主页就是经典的三列布局,很明显的左、中、右
对于这种布局,给出的布局方案是:
第二,两列布局
以博客园一篇文章的链接为例,它分为左、右结构
对于这种布局的格式,设计方案是:
BootStrap的栅格系统
如果您熟悉并使用bootstrap
,那么您将不必自己去操心网页布局,因为bootstrap
已经把网页分成了12
列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统,就是简单看看栅格系统的实现,它是用float
实现的
对于父元素的清除浮动,bootstrap
使用的就是clearfix