这其实是一个非常普通的问题，在 很久 很久 很久 ，真的很久以前，已经被说过很多次了，不过都是英文的，其实中文的也有很多，但是我还是想翻一下，一方面自己加深印象，两一方面很多初学者也可以很容易搜都，看到。那么就开始了。
问题描述就是，当使用了浮动(float)布局的时候，就是父层的高度不会自动扩展到浮动子层的高度，具体表现为，子层的高度出来了，但是利用开发工具看的话，只能看到子层的高度，父层就只有那么一点点高。
解决办法其实很简单，1. 在浮动元素之后使用 clear 属性，清除浮动即可，2. 给父元素使用 clearfix 属性，但是IE支持有问题。3. 使用 overflow 属性，这里就着重讲一下 overflow 清除浮动的方法。
例子一：
此例子主要讲解浮动内容子层，没有把父层撑开的问题，简单的结构可以如下。
<div class="container">
<div class="a"></div>
<div class="a"></div>
</div>
这就会导致父层不被撑开的问题，解决方法很简单，父元素 overflow:auto 或者 overflow:hidden。即：
.container {
overflow: auto;
}
如图：
例子二：
overflow: auto; 也可以被用作阻止文字环绕图片，例如 再设计 WP 博客的评论时，一个头像在左侧，评论内容在右侧，又不能设置宽度等，此时就可以给评论的层设置 overflow: auto; 即可，优点就是不用设置宽度或者浮动，即可使文字自动不环绕图片，又在其后。
如图：
.image {
float: left;
}
.text {
overflow: hidden;
}
问题：
1. overflow: auto; 如果文字很长，或者图片很大，总之内容超出了父层规定的区域，那么就会产生滚动条。
解决办法不过 ）
demo 那么就要出现了。
demo1
demo2
来源：翻译
其实这个问题，我现在比较喜欢使用 float 毕竟对于很多东西，代码量明显减少，不用对很多元素都应用样式，但是各有各的好处，其实还是按个人习惯加上团队的开发习惯来比较好，这里转这篇文章，其实不是完整的一篇，而是来源于知乎 中的“在 CSS 布局中，用 float 好还是用 position 好？分别有什么优势？ ”这个问题，虽然问的是两种布局的优缺点，但是在后面的回答中，会有很多其他的知识出现，所以这才是转载的目的。
呃，其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。
float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。
float从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。
而position顾名思义就是定位。他有以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。
比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。
如果说到性能问题reflow问题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。
说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。
PS：
补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块狀换行和连续多行模型，前者可以设定尺寸，后者不可以设定尺寸（根据内容决定尺寸和折行）。
不过我们总是遇到固定尺寸，或者固定部分尺寸且不折行的场景，这个时候我们马上会想到使用float来做布局，因为float会触发shrink to fit特性，实现根据内容决定尺寸，float还不会产生折行，我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的，在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正，在某些场景它比float强，因为float模拟的流动布局不是多行连续布局，一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式，讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理，但是从结果上来说它很让人满意。
但是，我写这段的意思是说，很多时候我们希望控制的布局流问题不需要float和position实现，而应该通过显示模型定义来解决。比如现在的column layout、flex box等等，都是在这个角度解决我们遇到的问题，它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。
希望CSS3的进化能够让我们重建这样的信任。
上面是两个人的回答，都比较有代表性，虽然有些内容是重复的，但是还是建议好好看完，并且最好理解了。
