关于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次!
要注意了,我们是通过在别的元素上清除浮动来实现撑开高度的, 而不是在浮动元素上。
还是接着上面的例子,我们简单修改一下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浮动的一点思考的更多相关文章
- css浮动与清除浮动
css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
- 关于html页面元素语义化的一点思考
这几天在看招聘公告前端工程师的要求基本都附带了html语义化的要求,所以稍微关注了下这方面的知识.对于其中的一点就是要求页面元素在去除css样式之后还能有良好的布局引发了我一点思考.作为前端刚入门的我 ...
- [技术博客] 软工-Ruby on Rails前端工具链的配置以及对Web应用结构设计的一点思考
一.相关工具链简介 HAML HAML是专门面向Ruby on Rails模版语法设计的一门标记语言,其结合RoR的views部分模版语法的特点,对原来的*.html.erb(嵌入Ruby代码的HTM ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- CSS浮动讲解好文章推荐
经验分享:CSS浮动(float,clear)通俗讲解 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 好文推荐!
- 关于java异常的一点思考
关于异常的一点思考 异常生命周期 异常的来源 所有的异常都是抛出来的 有底层api抛出的 有自定义抛出的 异常的处理 1, 运行时异常 不做任何处理仍可编译通过 不建议捕获(不建议用异常来做流程控制, ...
- MSSQL显错注入爆数字型数据的一点思考
Title:MSSQL显错注入爆数字型数据的一点思考 --2011-02-22 15:23 MSSQL+ASP 最近在弄个站点,密码是纯数字的,convert(int,())转换出来不报错,也不知道其 ...
随机推荐
- Three.js开发指南---学习使用几何体(第五章)
一 基础几何体 1 二维图形:二维图形都是基于x和y轴构建的,即展示的形式就是他们都是“直立”的,如果希望这些二维图形躺下,则需要将几何体沿着x轴向后旋转1/4圈 mesh.rotation.x=-M ...
- JavaScript--事件绑定及深入(26)
// 事件绑定分为两种: // 一种是传统事件绑定(内联模型/脚本模型);上一章内容; // 一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能; 一 传统事件绑 ...
- python-命令模式
源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 命令在发送方被激活,而在接收方被响应.一个对象既可以作为命令的发送方,也可以作为 ...
- FI配置步骤清单
1.定义公司代码 配置路径: R/3定制IMG的实施指南>企业结构>定义>财务会计>定义, 复制, 删除, 检查公司代码 事务代码 EC01 2.编辑科目表清单 配置路 ...
- vue-cil 中的配置分析
自己写过配置分析,但是看了这位同学的文章之后发现写的比我全和细,索性直接转载过来了. 转自http://www.cnblogs.com/libin-1/p/6596810.html
- ArcGIS 中取出面上最大的Z值的坐标点
def MaxZ(shape): line = shape.getPart(0) pnt = line.next() maxValue = float("-in ...
- 葡萄城报表 SP2 新特性(1)— 单元格智能合并
中国式复杂报表的布局,因为数据的动态性和结构性,导致其布局往往是无规律,且在设计时无法预测的,如单元格合并,通常不仅希望在每一列的数据展现中,能够根据需要自动将相同的单元格合并,且每个单元格之间该属性 ...
- Impala随手记
最近开始使用Impala,基本完全兼容传统SQL,并且查询速度飞快,是Hive的良好替代: 1.登录及简单查询 impala-shell #列出数据库 show databases; #载入数据库 u ...
- ElementUI制作树形表组件
提要 最近项目中需要用到树形表格来描述部门.区域之间的父子展开关系.但是已经在项目中使用的Vue的成熟组件ElementUI以及iViewUI组件都没有提供相应的树形表格组件,无奈找了其他替代方案也都 ...
- Ionic命令大全
start [options] <PATH> [template] ............. Starts a new Ionic project in the specified P ...