</style>
<div id="main">
<div class="m_content"></div>
<div class="m_rightside"></div>
</div>
5、padding补白
这是前不久在网上看到的一种办法，实质就是为栏目添加一个足够大的padding-bottom值，将栏目撑开，然后再添加相同大小的负的margin-bottom值将内容移动回来。注意要在负盒子上加上overflow: hidden的属性。
代码如下：
CSS Code复制内容到剪贴板
<style>
#main {width: 100%;overflow: hidden;}
.m_content {width: auto;float:left;}
.m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;float:left;}
</style>
<div id="main">
<div class="m_content"></div>
<div class="m_rightside"></div>
</div>
CSS2的布局方法总结得到这里就告一段落了。现在来看看CSS3新增的布局方法。
一、Flex布局
因为书面上的解释比较抽象，我这里就尽量说得简单通俗一点。
要进行flex布局，需要定义一个flex容器，然后再处理其子项目。只要一个容器被定义为flex容器，那么其子元素都称作它的子项目。
flex布局的基本思想是通过flex容器来伸缩控制子项目的宽度和高度，以此来完全填充flex容器的可用空间。子项目的宽高、排列方式等都是通过设置相关属性改变的。那么以这种方式布局上述几种布局就简单多了。子项目默认的排列方式与浮动布局略为相似。
1、Flex容器
flex容器的定义方式：
CSS Code复制内容到剪贴板
div{display:flex}
flex容器分为主轴和侧轴。主轴决定容器子项的排列方向。侧轴与主轴相互垂直。主轴可有垂直和水平两个方向。
flex容器可对子项进行的操控有：（即设置在容器的属性。这个很重要！）
子项目的排列方向（也就是刚刚说的定义主轴）—— flex-direction
子项目的换行方式（就是超出flex容器跨度时换不换行=。=怎么换） —— flex-wrap
同时进行子项目排列方向和换行方式的设定 —— flex-flow
子项目在主轴的对齐方式（想象成文字的对齐方式就容易理解了） —— justify-content
