前端之路从零开始——第二周第一天笔记（浮动）

这篇笔记主要是Float浮动的使用以及如何清除浮动。

目录

• 1.display的取值
• 2.display 与 visibility 区别
• 3.认识标准文档流及特性
• 4.浮动float
  • 4.1.浮动的基础语法
  • 4.2.float浮动的本质和特性
  • 4.3.float浮动的作用机制
  • 4.4.float的天然克星
• 5.BFC与IFC
  • 5.1.BFC的含义
  • 5.2.BFC的表现原则
  • 5.3.BFC布局规则
  • 5.4.产生BFC的元素
  • 5.5.BFC的用处
  • 5.6.IFC的含义
  • 5.7.IFC布局规则
• 6.清除浮动的方法（重点）
  • 6.1.清除浮动之给父盒子加固定高度
  • 6.2.清除浮动之clear：both；
  • 6.3.清除浮动之overflow:hidden
  • 6.4.清除浮动之隔墙法与内墙法
  • 6.5.清除浮动之clearfix法
• 有趣的面试题：发挥想象力CSS让元素消失在视野中。

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

大牛博客：BFC详解

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