css默认的布局是将元素一个一个地往下排列下来，如果不采取浮动，将导致页面非常长。
下面我们通过做一个常见的网站布局，来说明浮动是怎么一回事。
希望的效果是:
步骤一、先把代码写一下，
例：
html内容：
css内容：
效果如下：
步骤二、
这不是我们想要的效果，我们想把siderbar块移到content块的右边。sidebar改成如下内容：
#sidebar
{
float: right;
width: 100px;
height:80px;
margin:10;
border:1px solid #000;
background: #afa;
}
得到的效果是：
或者是（改变浏览器的大小，sidebar位置会有变化）：
为什么sidebar设了浮动，但没有放在content的旁边？
讲解：
1、因为元素是按线性排列的，sidebar在我们的html文件中是第三个元素，把它设成浮动后，他也只在第三个元素原来应该在的位置处左右浮动，而不会跑到其他元素的位置浮动。
2、浮动元素后的元素（footer和<p>），如果浮动元素按线性排列所在的位置，能容下footer和<p>，则这些元素跟上来，
3、否则，就不跟上来，也就是找个能容的下他们的空地，也就是还在默认的自然流中的位置。
书上讲，浮动是元素从元素自然流中抽离出来，浮动元素之后的元素，环绕在浮动元素的周围，这句话的含义如上所述。
步骤三、
怎样达到我们想要的效果呢？
一个最简单的办法，是 #sidebar还是加上float: right的属性，然后颠倒下html文件中，content和sidebar的顺序。
动手做一做吧。
步骤四、
咦，什么是下面的效果，content和sidebar的上边距怎么不一致呢？
margin的问题以后再讲。
步骤五、
扫一扫
3596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
