这篇笔记主要是Float浮动的使用以及如何清除浮动。
1.display的取值
- 设置或检索对象是否及如何显示
- display:inline;指定对象为内联元素
- display:block;指定对象为块级元素
- display:none;隐藏对象，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
- display: table-cell 指定对象作为表格单元格
- display:inline-block; 指定对象为内联块（行内块）元素
注：display: inline-block;特点与缺点
特点： 可以让上下结构的元素排列方式变成左右水平排列的方式(让元素在一行显示)
缺点： 行内块元素会受换行符和空格的影响产生间距；
行内块间距，解决办法: 给行内块元素的父元素添加属性font-size:0;
IE6/7下不兼容 ，解决办法: 给行内元素上添加*display:inline;*zoom:1;
2.display 与 visibility 区别
- display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏；
- visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局 ；
- display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失；
3.认识标准文档流及特性
- 文档流指的是元素在文档结构中的排列方式；
- 标准文档流：网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流；
- 脱离文档流：打破原本的从上到下，从左到右的排列方式，比如重叠 、叠加 、覆盖等非正常的文档流的排列布局情况；
- 脱离文档流的元素：浮动、绝对定位和固定定位。
4.浮动float
4.1.浮动的基础语法
该属性的值指出了对象是否及如何浮动。
- float:none;设置对象不浮动
- float:left;设置对象浮在左边
- float:right;设置对象浮在右边
特点：
1.浮动元素会脱离文档流，不占位，导致下面的元素会往上跑；
2.可以让元素排列到一行显示；
3.float：left左浮动是靠左显示; float:right 右浮动是靠右显示；
4.同时设置左浮动，元素是按照html结构的顺序从左往右依次排列；
5.同时设置右浮动，元素与html结构的顺序相反，从右往左依次排列；如果想要正常html结构顺序，用右浮动就需要把html结构调换位置即可；
6.浮动不会继承也不会传递；
缺点：
1.会导致父元素的高度失效 值为0，后面的元素识别不了它的高度，就会往前占领它的位置；
2.给父元素设置背景颜色不起作用；
3.给父元素设置边框属性不会被撑开；
4.给父元素设置内边距padding 不会被撑开。
4.2.float浮动的本质和特性
浮动的本质就是为了实现文字环绕效果，而这种文字环绕，主要指的就是文字环绕图片显示的效果。
float的特性
1.包裹性：由 “包裹” 和 “自适应性” 两部分组成;
- 包裹：假设浮动元素父元素宽度200px;浮动元素子元素是一个128px宽度的图片，则此时浮动元素宽度表现为”包裹”，就是里面图片的宽度128px；
- 自适应性：如果浮动元素的子元素不只是一张128px宽度的图片，还有一大波普通的文字，则此时浮动元素宽度就是自适应父元素的200px宽度，最终的宽度表现也是200px。
2.块状化并格式化上下文：块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。
// 浮动让元素块状化
span {
display: block; /* 这是多余代码 */
float: left;
}
span{
float: left;
vertical-align: middle; /* 这是多余代码 */
}
提示： 也不要指望使用text-align属性控制浮动元素的左右对齐，因为text-align对块级元素是无效的。
3.破坏文档流；
4.没有任何margin合并；
4.3.float浮动的作用机制
- float著名的特性表现：会让父元素的高度塌陷； 高度塌陷：让跟随的内容可以和浮动元素在一个水平线上；
- float 与流体布局：利用float破坏css正常流的特性，实现两栏或多栏的自适应布局；
4.4.float的天然克星
clear属性官方解释：元素盒子的边不能和前面的浮动元素相邻；
- clear: none 默认值，左右浮动来就来；
- clear: left 左侧抗浮动；
- clear: right 右侧抗浮动；
- clear: both 两侧抗浮动；
clear属性只有块级元素才有效的；而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因.
.clear:after{
content:'';
display:block; // 也可以是"table"或者"list-item"
clear:both;
}
5.BFC与IFC
5.1.BFC的含义
BFC（Block Formatting Context）叫做“块级格式化上下文”；
5.2.BFC的表现原则
如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。
5.3.BFC布局规则
1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如- 此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。
5.4.产生BFC的元素
1.html根元素或其他包含它的元素；
2.float的属性不为none；
3.overflow为auto、scroll、hidden；
4.display为inline-block，table-cell，table-caption中的任何一个；
5.position为absolute或fixed；
5.5.BFC的用处
1.清除浮动
2.布局：自适应两栏布局
3.防止垂直margin合并
5.6.IFC的含义
IFC（Inline Formatting Context）叫做“行内格式化上下文”
5.7.IFC布局规则
在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框.
6.清除浮动的方法（重点）
6.1.清除浮动之给父盒子加固定高度
给前面浮动元素的父元素设置一个固定高度
注意点: 实际项目开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
6.2.清除浮动之clear：both；
给上级的盒子添加clear属性
6.3.清除浮动之overflow:hidden
- overflow : visible： 对溢出内容不做处理，内容可能会超出容器。
- overflow : hidden： 隐藏溢出容器的内容且不出现滚动条。
- overflow : scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
- overflow : auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
- overflow的效果等同于overflow-x + overflow-y。
6.4.清除浮动之隔墙法与内墙法
- 外墙法 : 在两个盒子中间添加一个额外的块级元素 ，给这个额外添加的块级元素设置clear: both;属性
注意点: 外墙法它可以让第二个盒子使用margin-top属性 ；外墙法不可以让第一个盒子使用margin-bottom属性。 - 内墙法 : 在第一个盒子中所有子元素最后添加一个额外的块级元素 , 给这个额外添加的块级元素设置clear: both;属性
注意点: 内墙法它可以让第二个盒子使用margin-top属性 , 内墙法它可以让第一个盒子使用margin-bottom属性。
// 具备两个条件:
// 1.具有块特点的标签，就算不是块级标签也需要转换为块级标签
// 2.给这个块级标签添加一个属性clear:both
<div class="main">
<div class="right">2</div>
<div class="left">1</div>
<div style="clear:both;"></div>
</div>
<div class="main">
<div class="right">2</div>
<div class="left">1</div>
<a style="display:block;clear:both;"></a>
</div>
6.5.清除浮动之clearfix法
利用clearfix 去清除浮动(实际项目中最常用的方法)——我是一块砖 哪里需要 就往哪里搬
<style type="text/css">
.clearfix:afer{
content:'';
display:block;
clear:both;
}
</style>
<div class="main clearfix">
<div class="right">2</div>
<div class="left">1</div>
</div>
<div class="main1 clearfix">
<div class="right">2</div>
<div class="left">1</div>
</div>
// 最完整clearfix清除浮动的方法：
.clearfix:after{
content:'';
display:block;
clear:both;
0;
height:0;
line-height:0;
font-size:0;
visibility: hidden;
overflow:hidden;
}
.clearfix{
zoom:1;
}
有趣的面试题：发挥想象力CSS让元素消失在视野中。
- display: none 让元素消失
- font-size：0 字体大小为0
- 0; overflow:hidden 宽度为0 而且溢出隐藏
- height:0; overflow:hidden 高度为0 而且溢出隐藏
- line-height:0; overflow:hidden 行高为0 而且溢出隐藏
- visibility: hidden; 可见性的元素隐藏消失
- opacity: 0; 透明度为0
- color / background: transparent 字体颜色或者背景颜色为透明
- text-indent: -9999px; 首段缩进足够大的负值
- position: absolute; left/top/bottom/right :-9999px; 定位 + - 方位的足够大的负值
- margin-top/bottom/left/right: -9999px; 的四个方位的足够大的负值
- transform: translateX(-9999px) / translateY(-9999px); 位移坐标值足够大的负值
- transform: scale(0); 缩放比为0