为了彻底弄明白 BFC，我看过很多 BFC 相关的文章，但是我个人觉得都不是太好，下面我推荐三篇文章来让你循序渐进的彻底弄明白BFC。

1. 先看一片中文博客来初步理解BFC

http://kayosite.com/block-formatting-contexts-in-detail.html

2. 通过上面对BFC的理解之后来看一起W3C的官方定义

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

3. 什么？还是没弄明白 BFC? 好吧，再来看这片文章

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

4. 是不是觉得自己已经对BFC有了一定的理解和掌握，但还是知其然而不知其所以然？似懂非懂？不要着急，下面这片文章会解决你所有的疑惑

http://michael4css.info/fundamentals/context/formatting.htm

在div中，文本布局经常出现，换行混乱的情况。问题表现：
1.如果是全英文字符串,中间不包含任何符号(包括空格)，不自动换行.
2.中英文混写，则在英文字符串的开始处换行（英文长度>div长度），结尾处不换行。
3.英文整个单词换行。等等，可能还有一些问题，这里只列出了常见的几个；

• word-wrap

  • 设置文字的能被中断和包裹
  • 是针对元素内的每一个单词而言，比如文字超长超出边界，将如何处理。
  • word-wrap: break-word; - 当长单词超出container的限制时，单词会折断到下一行显示

• word-break

  • 规定非中日韩文本的换行规则。(对中文正常换行，对英文按照如下说明处理)
  • word-break: break-all; - 允许在单词被截断换行。(即在容器末端有长单词不能完全显示，会截断单词)
  • word-break: keep-all; - 只能在半角空格或连字符处换行。

• text-overflow

  • text-overflow:clip; - 显示省略标记（…），而是简单的裁切
  • text-overflow:ellipsis; - 当对象内文本溢出时（超过width部分）显示省略标记（…）
    • 要想让text-overflow:ellipsis;生效，必须要先设置overflow:hidden;white-space:nowrap;

• white-space

  • 设置如何处理元素内的空白
  • 是针对元素内的整段文本而言，比如整段文本是强制显示在一行还是分行显示
  • white-space: nowrap - 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。

• 固定宽度的block元素的水平居中
  • 方法一: 设置左右margin为auto

    .center {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
    }
    

  • 方法二：

    .center {
        position: relative;
        left: 50%;
        width: 200px;
        margin-left: -100px;
    }
    

注意：当把img元素设置成block元素之后，其宽度默认就是图片本身的宽度，所以也属于有固定宽度的。

• 不确定宽度的元素的居中
  • 方法一：设置父级元素text-align:center;然后自身display:inline;
  • 方法二：利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”(推荐)

    .parent { /* 其父级元素要设置清楚浮动，不然可能会出现问题*/
      float: left;
      position: relative;
      left: 50%;
    }
    .children {
      position: relative;
      left: -50%;
    }
    

  • 方法三：使用table作为容器的方法来实现.(Table标签本身并不是块级元素,当我们不设置table的宽度的话,他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度,直接设置table的外边距margin:0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中,间接使里面的内容居中。)

    <table class="center"><tr><td>元素</td></tr></table>
    .center{margin:0 auto}
    

  • 方法四：利用table table-cell(利用table的可以宽度可以内容撑起来的特性)

    .container {
      display:table;
      margin:0 auto;
    }
    .children {
      display:table-cell;
    }
    

提示：下面所说的前、后，指的是元素在 html 节点中的书写顺序。

对块级元素的影响

1. 块级元素在float元素的前面和后面的显示效果是不一样的;
2. 块级元素在前，则float元素就会在块级元素之后另起一行来显示;
3. 块级元素在后，则块级元素会占据float元素所在行，且被float元素覆盖;
   但是块级元素内的inline元素遇到float元素则会环绕其显示;
4. 注意：上面的显示规则跟块级元素是否设置宽度无关;

二、对inline元素的影响

1. inline元素不多说，inline元素会环绕float元素显示;
2. 直接看demo了解细节

三、float元素对float元素的影响

1. 父容器的宽度足够容纳所有子元素，则在一行显示
2. 父容器的宽度不够容纳所有子元素，则后面元素会另起一行显示

请看：demo