浮动与定位

浮动元素的特征

浮动元素的框可以左右移动（根据float属性的值而定），直到它的外边框碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中。文档的普通流表现的就像浮动元素不存在一样。但是会影响文字的排列，文字环绕浮动元素进行排列。对于inline元素而言设置float后可以设置width和height。

清除浮动

含义

在非ie浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，当容器的高度不能自动伸长以适应浮动内容的高度，使得内容溢出到容器外面而影响布局的现象，为了防止这个现象的出现而进行的css处理，就叫做css清除浮动。

清除浮动的方法

一、父元素包含子元素清理浮动（父元素高度为auto）

1. 在浮动元素后使用一个空元素如

.news{
  background-color:gray;
  border:1px solid red;
}
.news img{
  float:left;
}
.news p{
  float:right;
}
.clear{
  clear:both;
}

  ![](news-pic,jpg)
  
some text
  

2. 使用css的:after伪元素
   给浮动元素的容器添加一个class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素，清理浮动。

.news{
  background:gray;
  border:solid 1px black;
}
.news img{
  float:left;
}
.news p{
  float:right;
}
.clearfix:after{
  content:" ";
  display:block/table;
  clear:both;
}

.clearfix{
  zoom:1
/*触发ie6,7的haslayout生成类似BFC的作用*/
}

  ![](news-pic.jpg)
  
some text

3. 使用BFC清理浮动（后面会讲）
   二、本身是浮动元素和另一个浮动元素排在一行

.box1{
  width:50px;
  height:50px;
  background:red;
  float:left;
}
.box2{
  width:50px;
  height:50px;
  background:blue
  float:left;
  clear:left;
/*想让box2向下移动，则clear应该作用在box2本身上，表示box2的左边不允许有向左浮动的元素*/
}

  

  

总结：父元素包含浮动子元素，高度塌陷就要清除浮动，方法主要有两种：1利用clear属性，包括在浮动元素末尾加一个空的div，利用:after属性元素实现。2触发父元素的BFC使父元素可以包含浮动元素。在网页的主要布局中使用:after伪元素的方法作为主要的清理浮动的方式。在小模块如ul里使用overflow:hidden,也就是BFC的方式。如果本身是浮动元素，则可以自动清理内部浮动。

定位

常见的定位有相对定位、绝对定位、固定定位。

含义

相对定位是相对于元素本身的正常位置。例如：20px就是元素left位置加20px,相对定位的位置虽然变了，但是原来的位置其他的元素仍能感觉到。
绝对定位的元素相对于设置了relative/absolute/fixed的父元素或者祖先元素，如果都没有则相对于html进行定位。绝对定位，其他元素就像它不存在一样。
固定定位相对于浏览器的窗口进行定位，其他的与绝对定位类似。

使用场景

绝对定位可以制作自动完成框，固定定位可以做固定导航菜单、网页右下角的固定菜单等，相对定位一般是用在父元素上作为绝对定位的子元素的参考点。

补充

1. 绝对定位与浮动元素的差别：浮动元素对于其他浮动元素和文本有影响，而绝对定位的元素其他元素就像它不存在一样。

2. 绝对定位相对于父元素是相对于父元素的padding 还是margin？
   1如果子元素的left和top有值，则相对于内边框。
   2如果没有值，位置相对于padding。
   所以，最好设置left/top/bottom/right/。

3. 绝对定位的宽度
   元素设置为inline-block、absolute、浮动后需设置固定的宽度，否则没有内容会撑不起来。
   绝对定位的宽度是收缩的，如果想撑满父容器，可以设置width:100%
   1当父容器的子元素是绝对定位的时候，子元素设置width:100%实际上指的是相对于父容器padding+content的宽度。当子元素是非绝对定位的元素时，子元素width:100%是指子元素的content等于父元素的content的宽度。

4. 绝对定位和BFC

绝对定位形成BFC清除浮动，阻止父子外边距合并。
如何让绝对定位的子元素垂直居中于父元素？

.box{
  width:200px;
  height:180px;
  position:relative;
}
.box1{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px
  /*值是box1宽度的一半*/
  width:100px;
  height:80px;
  background:red;
}

  

适用于子元素宽高一定且为绝对定位元素。

5. 不论元素是行内元素还是会块级元素只要设定了绝对定位，就都会生成一个块级框，也就是说例如行内元素设定了absolute后就可以设置height和width的属性了。

6. z-index:元素设置成绝对定位后就会脱离文档流，并且会失去占用的空间，而且偏移的位置越近就会造成重叠的问题。这就用到z-index属性，这个属性表示叠加的顺序，默认情况下z-index为0，在同一层叠上下文中，值越高的元素层级越高，就可以盖住低于其层级的元素。如果两个元素的层级相同，则越往后的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。

7. 相对定位和负margin

相对定位和负margin都会让元素的位置发生变动，都适用于对于微小元素的位置进行调节。但是，相对定位虽然表面上位置变了，但是原来的位置还在占用，而负margin位置是真的改变了，不再存在原来的位置。

BFC：

形成

比如一个元素设置了绝对定位、固定定位、浮动、inline-block、table-cell、overflow:hidden/auto/scroll后就会创建一个新的块级格式化上下文。

作用

1. BFC会阻止外边距（margin-top,margin-bottm）折叠
   两个相连的div在垂直的外边距会发生叠加，在实际开发中或许我们不需要这种折叠，这时可以利用BFC的其中的一个特性--阻止外边距叠加。

在举例说明BFC如何阻止外边距折叠之前，首先说明一下外边距折叠的规则：相邻元素和嵌套元素只要它们之间没有阻挡(例如边框、非空内容、padding等)就会发生重叠。因此，要解决margin重叠问题，只要让他们不在同一个BFC就行了。但是对于两个相邻的元素，意义不大。但是对于嵌套元素来说就很有必要了。只要把父元素设为BFC就可以了。

内边距重叠.jpg

如图，三个div各自包含一个p元素，三个div及其包含的P元素都有顶部和底部的外边距，但是只有第三个div的边距没有与它的子元素p的外边距折叠。
除了使用overflow:hidden外，还可以用padding,border,float等。

2.BFC阻止元素被浮动元素覆盖

正常情况下

不重叠.jpg

设置之后

不重叠2.jpg

如果content元素时块状元素的话，那么aside浮动元素将会覆盖在块状元素上面。但是设置了BFC后就不会。当设置了BFC后，块状元素和浮动元素的宽没有超过父元素的宽，就会并列，否则块状元素在浮动元素的下面。

3. BFC可以包含浮动元素
   设置overflow:hidden;
   正常情况下：

border1.jpg

设置之后：

border2.jpg

在上面的例子中，第一个在高度为anto的情况下出现了高度塌陷，这是因为内部的浮动元素脱离了普通流，因此该div相当于一个空的标签，没有高度和宽度。而第二个使用overflow:hidden触发了BFC,可以包含浮动元素。

补充

1. 支持BFC的浏览器（ie8/firefox/chrome/safari）
   在不支持BFC的浏览器（ie6,ie7）,通过触发haslayout，等同于BFC.
2. 每条BFC的属性都有其自身的特性，也有额外的效果，当用的时候看额外的效果是不是自己所想要的，一般来说overflow:hidden/auto的影响是最小的。但overflow会影响滚动条和绝对定位的元素。
3. 很多时候，我们的父容器本身需要position:absolute等形成了BFC的 时候，就可以直接利用这些属性了。

外边距合并

发生外边距合并的三种情况

1. 毗邻的两个兄弟元素之间的外边距会合并，例如：

这个段落的下边距被合并
这个段落的上边距被合并

2. 块级父元素与其第一个/最后一个 子元素
   如果块级父元素中没有设置BFC时，及上内边距、上边框时，那么这个块级元素和其第一个子元素就会发生上外边距合并的情况。此时，这个父元素对外展现出来的外边距就是父元素和其第一个子元素的margin-top的最大者。
   类似的若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border,padding,inline-block,height,min-height,max-height分割时就会发生下外边距合并的现象。
3. 空块元素
   如果存在一个空的块级元素，其border,padding,inline,content,height,min-height都不存在，那么此时它的上下边距中间将没有任何阻隔，此时，它的上下外边距将会合并。例如：

这个段落的和下面段落的距离将为20px

这个段落的和上面段落的距离将为20px

无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距截断，在负外边距的情况下，合并后的外边距为最大正外边距与最小的负外边距之和（即负边距中绝对值最大的一个），如两个兄弟元素，上面的元素的下边距为20px，下面的元素的上边距为-20px,那么发生外边距合并后，这两个元素的实际距离将变成0px。

阻止上下相邻的元素margin折叠

浮动元素、inline-block元素、绝对定位的元素的margin不会和垂直方向上的其他元素的margin折叠。

编码

编码1
编码2
编码3
编码4