网页设计之CSS盒模式与排版(2)
这段html在浏览器中将显示如下: 如果我们将其中的 leftbar 设置为 float:left；width：20% ，那么将是下面这个样子： 以上就是float的原理。不过，在实际实践中
这段html在浏览器中将显示如下:
以上就是float的原理。不过，在实际实践中，我们通常需要的是leftbar与main各自成一列，而不希望main的内容还流入到leftbar的下面。哈，这就需要你开动脑筋了，想想该怎么办？我们可以给main指定margin-left：20%，显示如下：
从上图我们发现了一个问题，那就是leftbar突破了其父元素content的区域。是的，漂移元素不再受其父元素区域的限制，或者说漂移元素不会使其父元素的区域撑大。这导致footer的呈现不满足我们的需要。clear属性骑着白马来帮助我们了，我们给footer加上clear：left的属性试试。
- 上一篇：CSS中overflow用法
- 下一篇：css实现页面文字不换行、自动换行、强制换行
精彩图集
精彩文章