# float

  • 元素"浮动",脱离文档流,不脱离文本流,位置尽量靠上,并靠左或右

对自己的影响

  • 形成"块"(BFC)
  • 这个块会负责自己的布局，宽高由自己决定

比如 span 中用 float 这个 span 就形成了一个 BFC，就可以设置宽高了

对兄弟元素的影响

  • 上面一般贴非 float 元素
  • 靠边贴 float 元素或边
  • 不影响其他块级元素位置
  • 影响其他块级元素文本

对父级元素的影响

  • 从布局上"消失"
  • 高度塌陷

浮动出现的最开始出现的意义是用来让文字环绕图片而已。 float 可以自动包裹元素。 float 会导致父容器高度塌陷。float 为什么会导致高度塌陷：元素含有浮动属性 –> 破坏 inline box –> 破坏 line box 高度 –> 没有高度 –> 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。 浮动会脱离文档流。产生自己的块级格式化上下文。

a. 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象） b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

# 请阐述Float定位的工作原理。

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。

CSS 的clear属性通过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。

如果父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

有一种 hack 的方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。另外还有一些方法 (opens new window)，比如添加空的<div></div>和设置浮动元素父元素的overflow属性。与这些方法不同的是，clearfix方法，只需要给父元素添加一个类，定义如下：

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

值得一提的是，把父元素属性设置为overflow: auto或overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。

浮动元素引起的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为 0（高度塌陷）。

  1. 添加额外标签，例如
  2. 使用 br 标签和其自身的 html 属性，例如
  3. 父元素设置 overflow：hidden；在 IE6 中还需要触发 hasLayout，例如 zoom：1；
  4. 父元素设置 overflow：auto 属性；同样 IE6 需要触发 hasLayout
  5. 父元素也设置浮动
  6. 父元素设置 display:table
  7. 使用:after 伪元素；由于 IE6-7 不支持:after，使用 zoom:1 触发 hasLayout。

在 CSS2.1 里面有一个很重要的概念，那就是 Block formatting contexts （块级格式化上下文），简称 BFC。创建了 BFC 的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，同时 BFC 仍然属于文档中的普通流。IE6-7 的显示引擎使用的是一个称为布局（layout）的内部概念。

# 解释下什么是浮动和它的工作原理？

  • 非 IE 浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

  • 工作原理：

    • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
    • 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

# 容器包含若干浮动元素时如何清理(包含)浮动

  1. 容器元素闭合标签前添加额外元素并设置clear: both
  2. 父元素触发块级格式化上下文(见块级可视化上下文部分)
  3. 设置容器元素伪元素进行清理
/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
*   contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
*   子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
*   zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
  content: ' '; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
  *zoom: 1;
}

# 清除浮动

  1. 使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义 css clear:both. 弊端就是增加了无意义标签。
  2. 使用 overflow。给父元素设置 overflow：auto 或者 hidden。 给包含浮动元素的父标签添加 css 属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。
  3. 使用 after 伪对象清除浮动。 该方法只适用于非 IE 浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

使用CSS中的clear:both;属性来清除元素的浮动可解决 2、3 问题，对于问题 1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
} /* for IE/Mac */

# 请解释一下为什么需要清除浮动？清除浮动的方式

  • 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示
  • 父级 div 定义 height
  • 父级 div 也一起浮动；
  • 常规的使用一个 class；
.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

# 清除浮动最佳实践（after 伪元素闭合浮动）：

.clearfix:after {
  content: '\200B';
  display: table;
  height: 0;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

# 有哪些清除浮动的技术，都适用哪些情况？

  • 空div方法：<div style="clear:both;"></div>。
  • clearfix 方法：上文使用.clearfix类已经提到。
  • overflow: auto或overflow: hidden方法：上文已经提到。

在大型项目中，我会使用 clearfix 方法，在需要的地方使用.clearfix。设置overflow: hidden的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。

# 行内元素 float:left 后是否变为块级元素？

浮动后，行内元素不会成为块状元素，但是可以设置宽高。行内元素要想变成块状元素，占一行，直接设置 display:block;。但如果元素设置了浮动后再设置 display:block;那就不会占一行。

# 如何居中 div, 如何居中一个浮动元素?

  1. 非浮动元素居中：可以设置 margin:0 auto 令其居中, 定位 ,父级元素 text-align:center 等等
  2. 浮动元素居中:
    1. 设置当前 div 的宽度，然后设置 margin-left:50%; position:relative; left:-250px;其中的 left 是宽度的一半。
    2. 父元素和子元素同时左浮动，然后父元素相对左移动 50%，再然后子元素相对左移动-50%。
    3. position 定位等等。

# 如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽

#div1 {
  background-color: #6699ff;
  width: 200px;
  height: 200px;

  position: absolute; //父元素需要相对定位
  top: 50%;
  left: 50%;
  margin-top: -100px; //二分之一的 height，width
  margin-left: -100px;
}

//方法二:

#div1 {
  width: 200px;
  height: 200px;
  background-color: #6699ff;

  margin: auto;
  position: absolute; //父元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

那么问题来了，如何垂直居中一个?（用更简便的方法。）

#container //<img>的容器设置如下
 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

# 设置元素浮动后，该元素的 display 值会如何变化？

  • 设置元素浮动后，该元素的 display 值自动变成 block

# zoom:1 的清除浮动原理?

  • 清除浮动，触发 hasLayout；
  • Zoom 属性是 IE 浏览器的专有属性，它可以设置或检索对象的缩放比例。解决 ie 下比较奇葩的 bug
  • 譬如外边距（margin）的重叠，浮动清除，触发 ie 的 haslayout 属性等