第章 CSS浮动布局

3、为讲解知识时用，最后需要去除*/}案例步骤步骤02设置新闻列表背景。设置背景颜色后，观察效果，会发现当新闻列表的内容超出一行时，会从盒子的最左侧开始排列，这说明新闻列表盒子的宽度依然是100%。#content#rightlist{background-color:#FFFF66;/*此背景只作为讲解知识时用，最后需要去除*/}案例步骤步骤03接上步操作，为右边新闻列表的盒子加上一个左外边距（大于或等于左边盒子大小）。#content#rightlist{background-color:#FFFF66;margin-left:208px;/*设置右

4、边盒子的左外边距*/}案例步骤步骤04对于步骤3的另一种方案，是为右边的盒子设置宽度并让其也浮动起来。为此，将#content#rightlist选择器的代码作如下更改。为了使左右两个盒子中间产生一定的空隙，可以为左边或右边的盒子设置20px的间距，此处设置右边盒子左边界。#content#rightlist{background-color:#FFFF66;float:left;/*设置右边盒子左浮动*/width:652px;/*设置右边盒子宽度*/margin-left:20px;/*设置右边盒子左外边距*/}案例步骤此处将右边盒子的宽度设为6

5、52px，这个宽度是怎么确定的呢？页面宽度（960px）减content的左右内边距（各40px，共计80px），再减去左边盒子的大小（208px）及两个盒子的间距（20px），即960px-80px-208px-20px=652px。案例步骤步骤4方案的缺点是对后面标准流的元素位置产生了影响。解决办法是在浮动对象的相邻位置清除浮动元素对标准流元素的影响，此处在右边盒子rightlist后面增加一个空白盒子，并在该盒子的css样式中设置clear属性即可。案例步骤步骤05在HTML中id为rightlist的