css如何清除浮动(二)

在上篇介绍通过设置祖先元素的高度类清除浮动,但在实际的网站开发中,很少会设置元素的高度,那这是为什么呢?

是因为元素一般都能被内容撑高,所以不需要设置高度。

那能不能不写height,也把浮动清除了呢?也让浮动之间,互不影响呢?

还是同样的例子,通过对div2设置clear: both;来清除浮动,clear就是清除的意思,both就是全部的意思,包括左浮动和右浮动。这里对li设置左浮动,是div2会紧追在div1后面,就需要对div2清除浮动。

运行结果:

由运行结果,我们可以看出div2清除了浮动,但是对div2设置的margin-top: 10px;失效了。同样对div1设置margin-bottom也是失效的,本质原因div没高。这也是使用clear属性清除浮动的一个弊端。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容