关于 CSS 的知识中,布局是一个很重要的组成部分。布局方法有很多种,这其中的浮动布局能够实现一些很好的布局效果,于此同时, CSS 中的浮动属性也让人很伤脑筋,学习过程中比较难理解,我准备在这篇博客中把我学到的有关于浮动属性与浮动布局的知识都记下来,以备后用。
这是一篇很简洁的文章,限于时间与精力,暂时不会写的很详细,等以后有时间再回头补充一下。
两侧自适应的流体浮动布局
两侧自适应是指左右两栏都可以根据自身宽度来改变其内容的显示方式,实现方式是:
1.左边一栏设置左浮动,同时设置适当的右外边距与右边一栏隔开;
2.右边一栏设置
1 | 3.左右两栏的父元素设置 overflow 属性为 auto。 |
3.在浮动元素的后面添加一个清除浮动的空元素,例如
1 | <div style="clear:both;"></div>。 |
这种方法不推荐使用,因为会引入不必要的空元素。