CSS中的浮动和清除浮动,梳理一下!

从业三年,项目无数,现在回过头来,想要把一些重要的知识用白话整理出来:这个东西是什么?怎样才是最佳实践?希望对自己知识体系有梳理作用, 也希望对大家有些许帮助。

前端技术栈更新太快,眼花缭乱,大家一个劲揽过来学习的时候,别忘了回头看看那些已经掌握的基础知识。

第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。

浮动到底是什么?

浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。请默念3次!

浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示:


文字环绕效果

但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inlineblock之间的一个神奇的存在,在inline-block出来之前,浮动大行其道。直到inline-block出来后,浮动也有它自己独特的使用场景。

浮动有哪些特征?

浮动的特征就体现在前文的那句话中,别忘了默念三次!此外,浮动带来的负效果也算是它的特征之一。

浮动会脱离文档

脱离文档,也就是说浮动不会影响普通元素的布局


浮动会脱离文档流

从上图可以看出,默认三个设置了宽高的block元素,本来会格子独占一行;如果框1设置了向左/向右浮动,他会忽略框2和框3,直到碰到父元素;同时也存在盖住普通元素的风险

浮动可以内联排列

浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列的特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于blockinline之间的存在。

浮动可以内联排列

从上图可以看出,对多个元素设置浮动,可以实现类似inline-block的效果;但是如果每个元素的高度不一致,会出现“卡住”的情况

浮动会导致父元素高度坍塌

浮动会脱离文档流,这个问题对整个页面布局有很大的影响。

// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

// html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

结果如下,浮动元素脱离了文档流,并不占据文档流的位置,自然父元素也就不能被撑开,所以没了高度。


父元素高度坍塌

那怎么办呢?那就需要我们清除浮动,来解决高度坍塌问题!
清除浮动主要有两种方式,分别是clear清除浮动和BFC清除浮动,其他的你也不用去了解了。

clear如何清除浮动?

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。这句话,请默念5次!
要注意了,我们是通过在别的元素上清除浮动来实现撑开高度的, 而不是在浮动元素上。

还是接着上面的例子,我们简单修改一下HTML代码,如下

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>
clear清除浮动

高度坍塌的问题解决了,至此,好像浮动我们可以随便玩了,真棒!

不要在浮动元素上清除浮动

但是有人问到,如果我们给第三个元素加上clear:both,结果会怎样?

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>
不要在浮动元素上清除浮动

诶?给第三个元素加上clear:both之后,第三个元素的左右都没有挨着浮动元素,但是为什么高度还是坍塌了呢?机智的你可能发现了,由于第三个元素是浮动元素,脱离了文档流,就算给第三个元素上下加了清除空间,也是没有任何意义的。

clear清除浮动最佳实践

那么clear清除浮动的最佳实践是什么呢?请看如下代码:

// 现代浏览器clearfix方案,不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}
clearfix清除浮动

一句话,强烈推荐clearfix的方式清除浮动!

BFC清除浮动

BFC全称是块状格式化上下文,它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

✦ BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。

其中,BFC清除浮动就是用的“包含浮动”这条特性。
那么,怎样才能触发BFC呢?

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC:
floatleft | right
overflowhidden | auto | scorll
displaytable-cell | table-caption | inline-block | flex | inline-flex
positionabsolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动,但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断,比较局限。

.box-wrapper{
  overflow: hidden;
}

浮动的适用场景有哪些?

文字环绕效果

这个不用说了,浮动本来就是为文字环绕效果而生,这是最基本的


文字环绕效果
页面布局

浮动可以实现常规的多列布局,但个人推荐使用inline-block。
浮动更适合实现自适应多列布局,比如左侧固定宽度,右侧根据父元素宽度自适应。


页面布局
多个元素内联排列

如果前文提到的,浮动可以实现类似inline-block的排列,比如菜单多个元素内联排列。但个人推荐使用inline-block。

多个元素内联排列

又来点总结?

本来只是想简单说说浮动的背景、浮动的问题,浮动的解决方案,但真整理起来的时候,又发现很多知识点需要扩展,很多东西需要掰扯,一文难以言尽,所以只挑一些我觉得比较主流比较重要的知识写出来,如果有兴趣可以自行展开。

✦ 浮动最初设计只是用来实现文字环绕排版的。
✦ 浮动的三个特点很重要。
1. 脱离文档流。
2. 向左/向右浮动直到遇到父元素或者别的浮动元素。
3. 浮动会导致父元素高度坍塌。
✦ 解决父元素高度坍塌的方式就是清除浮动,常规的方法是clear清除浮动和BFC清除浮动,推荐clearfix的方式。一定要弄清楚clear清除浮动的底层原理以及clearfix的那几行代码的具体作用。
✦ BFC有自己的特征,也有触发BFC的方式,这儿就不展开太多了。
✦ IE6/7不支持BFC,也不支持:after,所以IE6/7清除浮动要靠触发hasLayout,了解下就行,毕竟IE6/7已经是历史的产物了。

写这些文章主要目的是为了梳理知识点,没有固定计划,想到哪写到哪,如果大家有想了解的话,可以留言,我会结合经验梳理知识,并告诉你为什么要这样,怎么样做才是最佳实践。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,201评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,387评论 1 257
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,683评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,080评论 0 179
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,865评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,810评论 1 177
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,440评论 2 271
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,200评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,019评论 6 231
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,540评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,337评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,658评论 1 231
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,255评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,145评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,535评论 3 206
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,626评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,028评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,555评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,652评论 2 231

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,599评论 1 92
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 780评论 0 6
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 798评论 0 4
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 953评论 0 2
  • BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围 ”。 是 W3C...
    若邪Y阅读 1,737评论 0 2