浮动的定义与浮动的清除(BFC)

浮动

1. 什么是浮动

当元素的 float 属性不为 none 时就产生了浮动。

float

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

2. 浮动的影响

1. 浮动会使元素脱离文档流，具体表现为：

• 父元素高度塌陷，即不会包含浮动元素。
  比如上面的代码就会表现为

  
  

  父元素高度塌陷

• 文本环绕。
  

  
  

  文本环绕效果

  
  可以注意到这里.normal元素的宽度覆盖了.float元素，但是.float元素下是没有文本的，也就是说文本被“挤”出来了，这是因为它虽然会脱离文档流，但是不会脱离文本流。这个效果也是float属性的本意。其代码如下：

  
    
  float
    
  正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素
  

  body {
    background-color: #ccc;
  }
  .float {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #ddd;
  }
  .normal {
    background-color: #fff;
  }

3. 浮动的应用

• 上面提到的文本环绕。

• 写一个三列布局，左右固定宽度，中间自适应。

  
    
  left
    
  right
    
  自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
  

  body {
    background-color: #ccc;
  }
  .float {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #ddd;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .mid {
    height: 100px;
    background-color: #fff;
    margin: 200px; /*故意加上了上下 margin 值*/
  }

  这里我故意加上了上了 margin 值，可以看到效果：

  
  

  三列布局

  body 也随 .mid 的 margin 往下掉了，这点可以用前面介绍的外边距合并来解释。

  ps：我第一次自己写这个三列布局的时候，html 是这样写的

  
    
  left
    
  自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
    
  right
  

  如上把中间自适应的元素写在中间，其实这样比较符合逻辑，但是如果这样写是行不通的，右边的元素会掉下来，因为 .mid 元素是块级元素，会占满整行，.left 不会掉下来是因为它本来就是脱离文文档流的浮动元素。

清除浮动

在子元素上清除

这里我只写不会产生无意义标签的方法。

• 浮动元素后面若有兄弟元素，则可以在给它的兄弟元素加上clear属性。
  如文本环绕那一部分代码，给 .normal 加上 clear:left 或者 clear:both。clear 的具体用法这里不做过多赘述。

  

  Ztoy网络商铺多用户版

  在原版的基础上做了一下修正：增加1st在线支付功能与论坛用户数据结合，vip也可与论坛相关，增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文

  下载

• 给要清除浮动的元素加上伪类或者伪元素。

  .float::after {
    content: '';
    display: block;
    visiability: hidden;
    height: 0;
    clear: both;
  }

  关于 ::after 的使用可以看 MDN 的文档。

在父元素上清除，即BFC

BFC（Block Formatting Context），即块级格式上下文，它的官方解释是：

浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的情况）将创建一个新的块级格式化上下文。

总结来说它要满足下列条件之一：

1. float 不为 none

2. position 不为 static 或 relative

3. display 为 table-cell、table-caption、inline-block、flex、inline-flex

4. overflow 不为 visible

只要给父元素加上以上任意一个属性满足条件，也就是给父元素加上 BFC 就能清除子元素的浮动。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程