css如何清除浮动(三)

在上一篇文章中我们使用clear:both来清除浮动。会使margin失去效果,那如何才能即清除浮动,又不会使margin失效呢?

这就需要使用下面我们介绍的方法隔墙法。我们仍然以同样的例子来清除浮动。

隔墙法的本质就是在div1和div2之间再设置一个div。div作为一个墙,隔开了两部分,两部分都浮动,互不影响。

这里我们将这个div的类设置为clear。对clear这个div设置clear:both,而不在是对div2设置clear:both。如果想让div1和div2之间出现间距的,那么久可以对clear这个div设置高度就可以了。此时我们可以对clear这个div设置一个公共类h10,设置它的高度为10px,就可以出现使div1和div2出现间距。

运行结果:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 本文以div元素布局为例。教程开始:首先要知道,div是块级元素(div与span),在页面中独占一行,自上而下排...
    TW妖妖阅读 397评论 0 1
  • 本文为转载文章,转载地址:经验分享:CSS浮动(float 写在前面的话: 如果读者理解CSS盒子模型,但对于浮动...
    翻炒吧蛋滚饭阅读 1,067评论 1 14
  • 作者:杨元原文地址:http://www.cnblogs.com/iyangyuan 很早以前就接触过CSS,但对...
    IT程序狮阅读 666评论 1 12
  • 当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 假如有一个父容器宽度400px,高度6...
    飘雪飞舞阅读 899评论 0 0