清浮动的4种方法

1.对父级设置适合CSS高度

对父级设置适合高度样式清除浮动,一般设置高度需要能确定内容高度才能设置。

缺点:高度固定不可变,不够灵活

2.clear:both清除浮动

为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

3.伪类:after控制(最佳)

需要注意的是:after是伪元素,不是伪类,很多清除浮动大全之类的文章都称之为伪类,由于IE6-7不支持:after,使用zoom:1触发hasLayout。(.div指父级元素)

.div{zoom:1;}

.div:after {

Content:””;

Diaplay:block;

Clear:both;

}

4.父级div定义overflow:hidden

对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以用很少的CSS代码即可解决浮动产生。

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,997评论 0 1
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 4,276评论 0 6
  • 大家好,我是IT修真院郑州分院第四期的学员王相博,一枚正直、纯洁、善良的前端程序员 今天给大家分享一下,修真院官网...
    More_ce0d阅读 4,629评论 0 1
  • 写出画面感: 我推开房门,走进房间,坐了下来。 1、场景设置: 1-1进入老师办公室:满脑子在想如何应对老师提...
    斌临城下1943阅读 1,846评论 1 3