</div>
</body>
</html>
但是，当块级box内部都是行内box的时候，就不会产生BFC，而是产生IFC，但只要子元素中有一个块级box，就会产生BFC。Attention! 文档中指出，如果外层块级box的overflow: visible; 的话，不会产生BFC甚至IFC。
下面来看看IFC，IFC中包括文字以及行内元素，对于文字来说，排版实际上有很多名堂，尤其是对于英文字符，或者说字母类文本，如果各位对文字排版有兴趣的话，推荐各位一部视频教程，由美国著名IT教学网站lynda.com出品的网页设计排版视频教程《Typography.for.Web.Designers》，至于下载方法，这里就不多说了，相信大家各显神通都有办法。
如果在行内元素中同时包含文字的话，情况会比较复杂：
CSS Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<title>IFC</title>
<meta charset="utf-8" />
</head>
<body>
<div style="width: 400px; height: 300px; background: blue; overflow: visible;">
<span style="font-size: 20px;">Something</span>
<div style="display: inline-block; width: 200px; height: 100px; background: red;"></div>
</div>
</body>
</html>
注意观察span和div的底部对齐差异。
行内框在行框垂直方向的对齐：
行框高度总是足够包含其容纳的所有框，它可能会高于它包含的最高的框。在这里会跟vertical-align属性相关：
vertical-align可能的取值：
baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit
举一个例子：
CSS Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<title>Vertical-align</title>
