【转】CSS中的浮动和清除浮动
以下转自《CSS中的浮动和清除浮动,梳理一下!》
浮动到底是什么?
浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。请默念3次!
浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示:

但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline
和block
之间的一个神奇的存在,在inline-block
出来之前,浮动大行其道。直到inline-block
出来后,浮动也有它自己独特的使用场景。
浮动有哪些特征?
浮动的特征就体现在前文的那句话中,别忘了默念三次!此外,浮动带来的负效果也算是它的特征之一。
浮动会脱离文档
脱离文档,也就是说浮动不会影响普通元素的布局

从上图可以看出,默认三个设置了宽高的block
元素,本来会格子独占一行;如果框1设置了向左/向右浮动,他会忽略框2和框3,直到碰到父元素;同时也存在盖住普通元素的风险。
浮动可以内联排列
浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列的特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于block
和inline
之间的存在。

从上图可以看出,对多个元素设置浮动,可以实现类似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次!
要注意了,我们是通过在别的元素上清除浮动来实现撑开高度的, 而不是在浮动元素上。
这里插两句自己关于clear的理解, clear:left 会导致元素下降直到不和左浮动同行, clear:right 会导致元素下降直到不和右浮动同行。
both同理。而不是说左/右浮动的那个元素就不浮动了。(初学,不一定准确。) --wenr
还是接着上面的例子,我们简单修改一下HTML代码,如下
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div style="clear:both;"></div>
</div>

高度坍塌的问题解决了,至此,好像浮动我们可以随便玩了,真棒!
不要在浮动元素上清除浮动
但是有人问到,如果我们给第三个元素加上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:;
} // 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom:;
}

一句话,强烈推荐clearfix的方式清除浮动!
BFC清除浮动
BFC全称是块状格式化上下文,它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。
BFC的主要特征
✦ BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。
其中,BFC清除浮动就是用的“包含浮动”这条特性。
那么,怎样才能触发BFC呢?
BFC的触发方式
我们可以给父元素添加以下属性来触发BFC:
✦ float
为 left
| right
✦ overflow
为 hidden
| auto
| scorll
✦ display
为 table-cell
| table-caption
| inline-block
| flex
| inline-flex
✦ position
为 absolute
| 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已经是历史的产物了。
作者:齐修_qixiuss
链接:https://www.jianshu.com/p/09bd5873bed4
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【转】CSS中的浮动和清除浮动的更多相关文章
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- css中:overflow:hidden清除浮动的原理
要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
- 重温前端基础之-css浮动与清除浮动
文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...
- CSS浮动和清除浮动
1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...
随机推荐
- springBoot 使用拦截器 入坑
近期使用SpringBoot 其中用到了拦截器 结果我的静态资源被全部拦截了,让我导致了好久才搞好: 看下图项目结构: 问题描述:上图划红框的资源都被拦截器给拦截了,搞得项目中不能访问:解决问题就是在 ...
- SQLServer · 最佳实践 · 透明数据加密TDE在SQLServer的应用
转:https://yq.aliyun.com/articles/42270 title: SQLServer · 最佳实践 · 透明数据加密TDE在SQLServer的应用 author: 石沫 背 ...
- centos7下安装mysql会遇到的问题集合
1.mysqld_safe提示 command not found 解决方法 https://blog.csdn.net/lampqiu/article/details/79138961 2.Mysq ...
- 使用proxyTable解决vue里的跨域问题
由于没有跨域的接口,所以,用8080端口请求8081端口,来模拟跨域.跨域会出现下面报错. 1.找到config文件夹下index.js,在proxyTable对象里复制以下代码: proxyTabl ...
- PS扣签名
1.用PS打开签名: 2.在图层界面切换到[通道],选择一个黑白分明或者明暗明显的签名图通道.按着“Ctrl”键就会显示出手指和方块的图标,按键的同时左击一下选择的通道: 3.切换到第一项的[图层]界 ...
- 在idea中,mavne项目使用mybatis-generator-maven-plugin自动生成实体了的时候,在maven插件里面始终不显示
最近想学习mybatis的知识,自己搭了个简单的ssm框架,想通过插件自动生成实体类,发现想要的插件一直都没显示出来,着实很郁闷: pom.xm中的配置: <!--mybatis-generat ...
- CodeForces 935E Fafa and Ancient Mathematics (树形DP)
题意:给定一个表达式,然后让你添加 n 个加号,m 个减号,使得表达式的值最大. 析:首先先要建立一个表达式树,这个应该很好建立,就不说了,dp[u][i][0] 表示 u 这个部分表达式,添加 i ...
- 排序算法 (sorting algorithm)之 冒泡排序(bubble sort)
http://www.algolist.net/Algorithms/ https://docs.oracle.com/javase/tutorial/collections/algorithms/ ...
- STM32-跑马灯实验
实验环境: STM32开发板 Keil uVision4 FlyMcu.exe 一. 建立文件夹 1.建立跟文件夹"BASE"(名称任意),再在其下建立四个子文件夹 2. 在&qu ...
- 《NoSQL精粹》读后感
<NoSQL精粹>作者Pramod J. Sadalaga.Martin Flower著,译者爱飞翔. 本书以关系型数据库开头,讲解了关系型数据库的优缺点,然后引入了NoSQL数据库,并且 ...