开发者社区开发与运维文章正文

css display position float 之间的关系

2024-07-02 4

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： css display position float 之间的关系

看display是否为none，若是，则position和float 都不起作用，因为该元素不会被渲染；
看positon是否为absolute或fixed，若是，则float最终的计算值为none’，display最终的计算值为table或block【详见下表】
看float是否不是none，若float不是none，则元素会浮动，display最终的计算值为table或block【详见下表】
看该元素是否为根元素，若是根元素，则display最终的计算值为table或block【详见下表】，若不是根元素，则display的计算值为其指定值

display的指定值	最终display的计算值

inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block

其它

与指定值相同

文章标签：

前端开发

关键词：

CSS Position

display float

CSS display float

CSS position float

CSS display position float

朝阳39

aliyun5297948689-49597

25天前

前端开发容器

CSS基础-浮动：float与清除浮动

【6月更文挑战第9天】本文介绍了CSS中的`float`属性，用于创建多列布局和图文混排，但会导致浮动塌陷和元素重叠问题。为解决这些问题，文章探讨了`clear`属性的四种清除浮动方法，包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起，它们在某些场景下替代了浮动，但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。

aliyun5297948689-49597

18 5 6

米诺斯

5天前

前端开发

CSS中的display属性：布局控制的关键

米诺斯

112 42 43

逻辑峰

2月前

前端开发

CSS float（浮动）