<div>
不......这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！
CSS布局-2
转载：http://zh.learnlayout.com/clearfix.html
clear
clear 属性被用于控制浮动。比较下面两个例子：
<div class="box">...</div>
<section>...</section>
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
<div class="box">
<section>
我感觉好像我在漂浮！
</div>在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
<div class="box">
<section class="after-box">
我感觉好像我在漂浮！
</div>使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
清除浮动（clearfix hack）
在使用浮动的时候经常会遇到一个古怪的事情：
见证奇迹的时刻到了！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）.
让我们加入一些新的CSS样式：
现在再看看发生了什么：
<div class="clearfix">
好多了！
这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：
有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。
浮动布局例子
完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。
<div class="clearfix">
<nav>
- Home
- Taco Menu
- Draft List
- Hours
- Directions
- Contact
这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>百分比宽度
百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！
article img {
float: right;
width: 50%;
}
你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！
百分比宽度布局
你可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
<div class="container">
<nav>
- Home
- Taco Menu
- Draft List
- Hours
- Directions
- Contact
当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>媒体查询
“响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
<div class="container">
<nav>
- Home
- Taco Menu
- Draft List
- Hours
- Directions
- Contact
当你调整浏览器窗口大小时，布局比以前更酷了！
</section> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。
额外加分点
使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。
inline-block
你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：
困难的方式（使用浮动）
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
我在浮动！
</div>
<div class="box">
<div class="after-box">
我在浮动！
</div>我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。
</div>
容易的方式（使用 inline-block）
你可以用 display 属性的值 inline-block 来实现相同效果。
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
我是一个行内块！
</div>
<div class="box2">
<div>
我是一个行内块！
</div>这次我可没有用 clear 。太棒了！
你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣，可以在前面那个链接中找到更详细的信息。否则我们就继续下去吧。
inline-block 布局
你可以使用 inline-block 来布局。有一些事情需要你牢记：
vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top。- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
<div class="container">
<nav>
- Home
- Taco Menu
- Draft List
- Hours
- Directions
- Contact
<div class="column">
<section>
Tada!
</section> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section> </div>column
这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：
<div class="three-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 cloumn 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。
flexbox
新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。
网上有不少过时的 flexbox 资料。 如果你想要了解更多有关 flexbox 的内容，从这里学习如何辨别一份资料是否过时。我已经写了一份关于最新标准的详细文章。
使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：
使用 Flexbox 的简单布局
<div class="container">
<nav>
- Home
- Taco Menu
- Draft List
- Hours
- Directions
- Contact
<div class="flex-column">
<section>
Flexbox好容易使用！
</section> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section> </div>使用 Flexbox 的牛逼布局
<div class="initial">
空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。
</div> <div class="none">无论窗口如何变化，我的宽度一直是200px。
</div> <div class="flex1">我会占满剩余宽度的1/3。
</div> <div class="flex2">我会占满剩余宽度的2/3。
</div>使用 Flexbox 的居中布局
<div class="vertical-container">
<div class="vertically-centered">
CSS里总算是有了一种简单的垂直居中布局的方法了！
</div> </div>css框架
因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能契合你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。
