浮动与定位

浮动与定位

1 . 浮动的特征，影响#####

浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住

浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框，形成文字环绕的视觉效果。

对父元素的影响 子元素都浮动时，父元素高度为0，高度塌陷。

对其他浮动元素的影响 同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面；反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下

对普通元素的影响 对于兄弟节点为块元素来说位于浮动元素后面的元素可能会被浮动元素覆盖

对文字的影响 文字会被挤出去，形成文字环绕浮动元素的效果。

对子元素的影响 当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

2 . 清除浮动是指#####

清除浮动指清除掉元素float属性，解决浮动父容器高度塌陷问题，及 对其他元素造成的副作用。

清除浮动的方法

（1）如果我们想让父元素在视觉上包围浮动元素可以像下面这样处理,在最后添加一个空div，对它清理。缺点是增加了一个无意义的标签

（2）BFC清理浮动

两种方案

虽然我们得出了一种浏览器兼容的靠谱解决方案，但这并不代表我们一定得用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性了，大家要掌握原理，活学活用。总而言之清理浮动两种方式

利用 clear属性，清除浮动

  .clearfix{

      *zoom:1;

  }

  .clearfix:after{

      content:"";

      display:block;

      clear:left;

  }

使父容器形成BFC

3 . 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？#####

有一下几种定位方式。

值 属性 使用场景

inherit 规定应该从父元素继承 position 属性的值

static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px

absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定

定位机制

CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式

浮动定位定位机制

绝对定位包括 absolute和 fixed

absolute 和 fixed

相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样

绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位demo。

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。

fixed固定定位，固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块儿是视口（viewport）。

绝对定位宽度

绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%。

绝对定位和 BFC

绝对定位能形成 BFC 可用来清除浮动 可用来阻止外边距合并

绝对定位垂直水平居中

4 . z-index 有什么作用? 如何使用?#####

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

5 . position:relative和负margin都可以使元素位置发生偏移?二者有什么区别#####

position:relative和负margin都能是元素位置发生偏移，但两者的原理是完全不同的。

margin是外间距，position是定位，两者毫无相似之处

position:relvation是相对于自身原来的位置偏移，但其他元素认为它还在原来的位置。

margin的兼容性更好。负margin的偏移会对其他元素产生影响，如果一个元素用负margin的方式偏移，可能会使相邻元素的布局发生改变。

6 . BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明#####

BFC的全称是 Block Format Content。

① BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

②BFC不会重叠浮动元素

③BFC可以包含浮动

我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC

  float为 left|right

  overflow为 hidden|auto|scroll

  display为 table-cell|table-caption|inline-block

  position为 absolute|fixed

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">

<div style="height: 100px; width: 100px; background-color: Red;  float:left;">      </div>

<div style="height: 100px; width: 100px; background-color: Green;  float:left;"> </div>

<div style="height: 100px; width: 100px; background-color: Yellow;  float:left;"> </div>

</div>

BFC清理浮动局限性

使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。

7 . 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例#####

定义：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

产生条件：外边距和并一般发生在父元素与子元素为同种BFC，且父元素没有border，

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

浮动与定位

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

浮动与定位

阻止元素出现外边距合并的方式

场景 方法

父子元素 给父元素设置一个padding值或者加上边框，或者将父元素形成BFC。

相邻元素 ① 给相邻元素设置float或inline-block属性。②给相邻元素分别包裹一层父元素，将这个父元素形成BFC。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

代码##

实现如下alert效果：http://js.jirengu.com/todufujiwu/1/edit?html,css,output

实现如下表单效果：http://js.jirengu.com/labacusedi/1/edit?html,css,output

实现如下模态框效果：http://js.jirengu.com/sobizoqowa/1/edit?html,css,output

实现如下导航栏效果：http://js.jirengu.com/keyudilagi/1/edit?html,css,output对