浮动+定位+BFC边距合并

2017-03-21 本文已影响130人好奇而已

关键字:

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>
![](/i/eg_mouse.jpg) 
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>

</html>