关键字:
1 浮动元素相关
2 清除浮动
3 定位方式
4 z-index
5 position:relative
6 BFC是什么,作用,生成
7 外边距合并的几个实例
8 代码练习4个实例
1 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 什么是浮动元素?
通过设置浮动元素是 float 属性值不是 none 的元素,比如flaot:left的元素
浮动特征:一个正常元素脱离普通文档流.然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它,浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
对父容器的影响:浮动属性的子元素造成父容器高度塌陷,像脱离一样
Paste_Image.png
- 造成影响的原因: 在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。
- 对浮动元素影响: 其中一个浮动的外边缘靠到包含框或另一个浮动框的边框,向左或向右紧挨.
- 对普通元素影响: 普通元素会当浮动元素不存在,不影响普通元素原来的位置.
- 对文本影响: 文字会感知浮动元素的存在,当有文字的普通文档流元素与浮动元素重叠时,其文字会围绕在浮动元素旁,原因在上面.
2 清除浮动指什么? 如何清除浮动? 两种以上方法
- clear 属性规定元素的哪一侧不允许其他浮动元素。
比如clear :left 属性定义了元素的左边上不允许出现浮动元素。在 CSS1 和 CSS2 中，本质上清楚浮动这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的 。在CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。
清除浮动元素方法?
首先我们为什么要清除浮动元素?
浮动可能造成: 布局时出现重叠;被浮动元素遮挡内容;有时父容器高度会塌陷;父容器没有包裹到浮动的子元素;有时文字会围绕浮动元素;被浮动影响而被隔开.怎么清除浮动元素的影响?
方法1:在html里增加空div,并设置css样式为clear:both;
Paste_Image.png
为什么会生效?
原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。
这种方法比较简单，
缺点:要在页面中增加冗余标签，违背了语义网的原则方法2:使父容器浮动
另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
代码这样写：
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
- 这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。
-
方法三：浮动元素的自动clearing
它的思路是让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。
要做到这点，只要为父容器加上一条"overflow: hidden"的CSS语句就行了。代码这样写：
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法的缺点主要有二个，一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。
方法4:在父容器的尾部自动创建一个空的子元素
代码
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}
这样也是可以的:
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
- 其中的"clearfix"是父容器的class名称，"content:"";"是在父容器的结尾处放一个空白字符，"display: block; clear: both;"是确保这个空字符是非浮动的独立区块。
- 为什么加: *zoom: 1;
after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。
3 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。 -
参考点和使用场景在下图的描述当中
Paste_Image.png
4 z-index 有什么作用? 如何使用?
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- 元素可拥有负的 z-index 属性值。
- Z-index 仅能在定位元素上奏效（例如 position:absolute;）
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
实例:
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>
</html>
5 position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative
位置发生偏移.是相对于自己之前正常的位置计算的,何为正常位置:没有定位position:static.不影响普通文档流中其他的元素的位置,但还占据原来的位置 - margin 设为负值
位置发生偏移,影响普通文档流中其他的元素的位置.原来的位置会发生改变
6 BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。
-
如何生成BFC:
Paste_Image.png
Paste_Image.png
作用:
BFC会阻止垂直外边距的折叠
BFC不会重叠浮动元素
BFC可以包含浮动元素BFC会阻止垂直外边距的折叠的7个实例
Snip20170406_231.png
Snip20170406_232.png
Snip20170406_233.png
Snip20170406_230.png
Snip20170406_235.png
Snip20170406_236.png
- BFC不会重叠浮动元素的1个实例:
Snip20170406_237.png
- BFC可以包含浮动元素的6个实例:
Snip20170320_61.png
Snip20170320_62.png
Snip20170320_63.png
Snip20170320_64.png
Snip20170320_65.png
Paste_Image.png
7 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 合并4种场景:
第1种.
兄弟控件
第2种.
父子控件
父子控件实例
第3种
空元素作为子元素
第4种
外边距合并可以设置margin负值
8. 代码练习4个实例
参考地址:
清除浮动实例
浮动元素和清除浮动方法
MDN文档:float
