css-position，float，display的关系和优先级

最新推荐文章于 2025-04-15 15:52:32 发布

原创最新推荐文章于 2025-04-15 15:52:32 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #position-f

css 专栏收录该内容

20 篇文章

订阅专栏

本文详细解析了 CSS 中 display 属性的设定值及其计算值之间的转换规则，包括 none、inline-table 和 block 等不同设定值下的表现行为，并探讨了 position 和 float 对 display 值的影响。

display的转换对应表

设定值	计算值
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block	block
其他	同设定值

1.display值是none

如果display是none，则position和float不起作用。因为元素不产生框，因此浮动和定位无效。若display不是none，则继续

2. ‘position’ 的值是 ‘absolute’ 或 ‘fixed’

框是相对定位的，计算后的float应该是none。并且display按照上表设置。框的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。

也就是说，当元素是绝对定位时，浮动失效，’display’ 会被按规则重置。
若position不是absolute或fixed，则继续

3.float的值不是none

如果float值不是none，则该框浮动并且display按照转换对应表设置，若float是none

4.元素是根元素

如果元素是根元素，display值按照对应表设置，否则，按照5

5.应用指定的display特性值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

github_34514750

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS-1-样式优先级 position 居中 display 弹性布局盒模型省略号坍塌

sharryling

03-26

869

参考链接：https://blog.youkuaiyun.com/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...

HTML-and-CSS-Basic

03-19

8. **层叠性**：CSS名字中的"Cascading"意味着当多个样式应用于同一元素时，会根据优先级和层叠规则决定最终样式。 9. **Flexbox布局**：用于创建灵活的、响应式的布局，主要属性有`display: flex;`, `justify-...

参与评论您还未登录，请先登录后发表或查看评论

【CSS】display、position、float 三者的优先级

Dora_5537的博客

08-29

1747

1. display 的值是 none 如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。 2. position的值是 absolute或 fixed 如果 position的值是 absolute或 fixed，则浮动失效，并且 display 的值按照对应表设置。否则，继续进行3。此时，元素的位置将由 ‘top’，’...

知识点：float、position与display关系

(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭

12-25

2142

问： position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ float、position 和 display 之间的关系：如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生；除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属

【20】display,float,position的关系

weixin_30339969的博客

05-13

291

【20】display,float,position的关系如果display为none，元素不显示。否则，如果position值为absolute或者fixed，元素绝对定位，float的计算值为none，display根据下面的表格进行调整。否则，如果float不是none，框是浮动的，display根据下表进行调整。其他情况下display的值为指定值。** 转载于:https:...

position属性，display属性，float属性

weixin_57727027的博客

05-08

544

position属性，display属性，float属性讲到盒模型，有三大属性可以用来控制页面的排版。三大属性：position属性，display属性，float属性。 ①position 属性控制页面上元素间的位置关系。规定元素的定位类型。定义建立元素布局要用的定位机制，每一个元素都是可以定位的，不论此元素本身是什么类型，绝对定位（absolute）的元素或固定定位（fixed）的元素会生成一个块级框。而相对定位（relative）的元素会相对于它自身在正常的文档流中的默认..

display、float、position的关系

LuckXinXin的博客

01-27

176

如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。否则，如果float不是none，框是浮动的，display根据下表进行调整否则，如果元素是根元素，display根据下表进行调整其他情况下display的值为指定值总结起来：绝对定位、浮动、根元素都需要调整display ...

Week02-CSS-snippet-cheat-sheet:CSS cheets

03-29

2. **CSS属性**：如颜色、字体、边距、填充、背景、布局属性（如display、position、float、flexbox、grid）等。 3. **盒模型**：理解盒模型的工作原理，包括content、padding、border和margin。 4. **CSS单位**：...

HTML+CSS基础教程-介绍HTML和CSS的基础知识学习HTML基础语法、标签、CSS基础语法和选择器

09-26

布局属性如display、position和float则提供了不同的布局方式。Flexbox布局是CSS3中引入的布局模式，提供了更灵活的布局选项。在文本排版样式和字体方面，可以设置字体的种类、大小、颜色和对齐方式。了解字体族和...

13、HTML & CSS - 级联样式表

最新发布

y2z3a4b5c的博客

04-15

本文详细介绍了HTML与CSS的基础知识及应用，包括CSS的三种引入方式：内部样式表、外部样式表和内联样式。同时深入讲解了CSS的核心概念，如选择器及其优先级、属性和值、盒模型、定位方式以及响应式设计的实现方法。此外，还介绍了常用的CSS框架，特别是Bootstrap的使用方法。通过这些内容的学习，读者可以掌握网页布局与样式设计的核心技能，为实际开发提供有力支持。

display, position和float的关系

Jessica0906的博客

11-13

1135

display, position和float的关系？（ps：第一次被问到这个问题时候其实是一脸懵逼，因为在此之前压根没把这仨放一起对比研究过，直接把他们有的分到了萝卜筐，有的分到了白菜筐，主观上没觉得有啥关系，只觉得他们是各司其职的，不过稍微一琢磨他们还是有点关联和相互制约的，以下是参考了别人的答案和自己实验得出一些粗浅的关系） ①如果display设置为none，那positio

position+float+display一点理解

Tankpt的专栏

03-14

1473

==感觉不算是原创把，主要是以博客一为例，好多都是他的原话，原博主真是牛逼，有些例子自己重写了，然后有些话写成了自己理解的话，然后又参考了几个其他的文章，不知道对不对，希望看到问题多多指点，多谢了参考博文： [1]http://www.cnblogs.com/coffeedeveloper/p/3145790.html [2]http://www.cnblogs.com/WhiteCu

CSS网页布局心得（样式优先级，块级元素，内联元素，display，position，float）

sinat_32547817的博客

08-18

804

文章涉及的知识点：CSS，样式优先级，块级元素，内联元素，display，position，float

css笔记（三特性、position、float、display）

html标签-meta

11-27

491

一: css三大特性: 层叠、继承、优先级 1.层叠层叠：浏览器对多个样式叠加，最终确定结果。层叠优先级：浏览器默认样式自定义浏览器样式外部引用内部引用内联样式样式冲突，遵从就近原则不冲突，层叠原则相关题目： link与@import区别标签：link是html标签，@import是css标签加载：link页面加载同时加载，@import页面加...

css position属性以及 float、display、position的问题整合

evilemon的博客

07-02

1528

在css中，有两个属性可以破坏文档流：一个就是float属性，另一个就是position属性。假设一个父级元素未定义高度（默认div的宽度是100%，即最大化；高度是最小化，即如果div没有设置高度，则其虽然占据物理空间，但是在页面上显示不出来），它的高度就要由子元素来填充，这时，如果设置子元素float属性，子元素就会脱离文档流，当所有的子元素都脱离了文档流，父级元素的高度就变为0，无法显示

display与position，float之间的关系

weixin_44392745的博客

06-26

943

positon 与 display 的相互关系元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。 relative : 原来是什么类型的依旧是什么类型。 absolute | fixed ：元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位 <span style=”position:absolute; width:100px; height:50px;”>sp

【CSS布局】详解display，position， float属性！

Sixstar_yanxin的博客

08-14

756

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ..

网页制作手册：精通CSS样式表的应用与优先级