css清理浮动黑科技

作者 : 开心源码 本文共411个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共65人阅读

浮动在pc上布局还是经常要使用的(当然不考虑低版本ie浏览器flex爽到爆),但是浮动会产生导致父级对象盒子不能被撑开等问题。

css清理浮动黑科技

我自己总结主要有两种方式,clear和BFC清理浮动。

clear需要设置在父元素中最后一个子元素上,

注意:clear (例如 clear: right) 是对某个元素设置,以避免其某一边有浮动元素,即对当前元素产生束缚,束缚的边界为其余的浮动元素。对于已经浮动的元素,设置 clear float 是无效的。

css清理浮动黑科技

BFC清理浮动(什么是BFC自行Google)

我们可以给父元素增加以下属性来触发BFC:

float 为 left | right

overflow 为 hidden | auto | scorll

display 为 table-cell | table-caption | inline-block | flex | inline-flex

position 为 absolute | fixed

注意,IE6/7不支持BFC,也不支持: after伪元素。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css清理浮动黑科技

发表回复