CSS浮动布局的最佳或推荐用途是什么？

Question

我一直在许多工作/项目中使用CSS属性，在很多情况下，我遇到过使用浮动元素清除浮动元素，在浮动元素末尾使用额外的html元素，或者在额外元素的样式中使用clear:both;，或者使用clearfix (这是一种常见的工作，用于清除浮动元素)，或者有时通过在父样式中使用overflow:hidden。

尽管这些解决方案在很多场合都对我有用，但我真的很想知道更多关于这些解决方案的信息，并希望有其他方法来解决这个问题。

为了更好地理解我提出的问题，我很感激你的任何建议或问题。

Fiddle在小提琴，我已经创建了3个例子来解释我一直在使用的解决方案。在示例3中，我使用了overflow: hidden，但使用该解决方案存在问题。例如，如果我想让某些内容溢出它的父程序，那么在这种情况下我就不能这样做。

我正在使用的CSS中的一些行是：

.wrapper {
    width: 300px;
}
.sidebar {
    float: left;
    width: 100px;
    height: 300px;
    background-color:#f9b25e;
}
.content {
    margin-left: 100px;
    background-color:#45ca5f;
}
.column-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #448bcc;
}
.column-right {
    float: left;
    width: 100px;
    height: 200px;
    background-color: #dd4444;
}


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

/* Example 2*/
.clear { clear: both; }


/* Example 3*/
.ex-3 .content{
    overflow: hidden;
}

Answer 1

行、列和浮动的东西已经很好地被处理好了，比如twitter引导。使用这种方法不仅可以获得猜测结果，而且还可以确保您的布局看起来与浏览器相同。

一般来说，这是一个更好的方法，因为你也有一些优雅的断点，一直到移动。

您不需要使用引导程序所拥有的一切(尽管我也推荐！)你可以直接使用他们的网格系统。

http://getbootstrap.com/css/#grid