display与float的区别

最新推荐文章于 2025-03-03 22:00:53 发布

hhhhhhhhhhyou

最新推荐文章于 2025-03-03 22:00:53 发布

阅读量1k

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43372535/article/details/121625053

版权

display

display属性

display特性

块级元素与行级元素的转变

控制块元素排到一行

控制元素的显示和隐藏

float

float属性

display：inline-block和float的区别

display可以让元素排在第一行，并且支持宽度和高度代码实现起来方便

位置方向不可控，会解析空格

IE6.IE7上不支持

float可以让元素排在一行并制作宽度和高度，可以决定排列方向

float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hhhhhhhhhhyou

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

浮动float和display

weixin_44011306的博客

06-26

738

浮动float和display浮动样式 floatcss 浮动示例常规浮动效果1常规浮动效果2常规浮动效果3常规浮动效果4float 浮动实际应用场景：clear 清除浮动：float 浮动副作用-塌陷父元素：display 设置元素框类型浮动样式 float 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，使用浮动的元素会默认转换为块儿级。 css 浮动示例当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：常规浮动效果1 当框 1

清除浮动（常用的四种方式）

Indomite的博客

10-10

2551

问：为什么要清楚浮动呢？答：由于浮动元素会脱离原来的文档流，不占用页面的空间，导致父元素因为子元素的浮动引起内部高度为0的情况，导致页面显示不正常。用个例子展示一下首先，这是没有使用浮动的情况：，父元素没有设置宽高，但是被子元素的高撑起来了，至于宽的话，我们知道，div是属于块级元素，默认占一行。然后，我们先给小子元素添加浮动，让其脱离文本流，观察父元素的变化。这时候我们观察到，当小子元素脱离了文本流之后，父元素自是根据大子元素（未脱离文本流）的高度进行变化。最后，我们在将大小两个子元素都设置

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

CSS19：display和float对比

搬运工

02-25

530

display 和 float 都可以使元素在同一行，但是也各有缺点。 display：元素方向不可能控制 float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

CSS—float浮动，清除浮动的6种方式、显示模式display、定位position、元素溢出overflow

最新发布

m0_74556076的博客

03-03

1014

CSS—浮动float，清除浮动的6种方式。显示模式display、定位position、元素溢出overflow。

浮动display和float

屿屿屿屿屿的博客

06-27

1063

块级元素：独占一行 h1-h6 p div 列表…行内元素：不独占一行 span a img strong 3、float 1、左右浮动 float 4、父级边框塌陷问题(以float为例) 增加父级元素的高度增加一个空的div标签，设置属性父级元素增加属性父类增加一个伪类小结：**浮动元后面增加空div简单，代码中尽量避免空div设置父元素的高度简单，元素假设有了固定的高度，就会被限制overflow简单，下拉的一些场景避免使用父类添加一个伪类：after写法稍微复杂一

CSS——display和float

weixin_30929295的博客

07-20

228

1、display 属性规定元素应该生成的框的类型。值描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示...

display和float

是略不是咯的博客

08-04

284

display和float **块级元素：**独占一行，里面可以放行内元素，类似于一个大容器 <h1><li><div>等 **行内元素：**放在一行里面的元素，类似于一个一个小组件，设置高度没有效果 <img>等块级和块级一起放时会垂直排列，行内元素可以放在一行里。可以用display来更换块级和行内 display:block /*变成块级元素*/ disp

css(display,float,position)深入理解

12-13

display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否...

浅谈CSS中display/float/position属性值的相互影响

12-13

有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下：如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。否则，如果’...

CSS display:inline和float:left两者区别探讨

01-19

本文和大家重点讨论一下CSS display:inline和float:left两者的区别，CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:...

display和float （04）

yihjh的博客

11-02

500

display display block 块元素 inline 行内元素 inline-block 行内块元素行内--不换行块---设置宽高 none 不显示 inline-block 存在的问题 font-size:0; 加在父组件上，同时在子标签上再次设置font-size 子元素实际高度不一致时，需要vertical-align:top; 设置顶部对齐无法做到右对齐 <!DOCTYPE html&g...

display和float使用上的区别（1）-----多栏布局的实现

weixin_33674976的博客

04-07

432

在说这个问题之前，先简要介绍下display和float这两个属性。 float属性控制html组件是否浮动与如何浮动，当通过该属性设置某个对象浮动后，该对象将被当成块组件处理。它有left和right两个值，分别指定对象向右向左浮动。而display属性用于规定元素应该生成的框的类型。来看下display可取的值：通过上述介绍可以看出，其实float和...

display和float的用法详解

weixin_50500741的博客

03-12

2005

目录（1）块级元素（block) （2）行内元素（inline）一、flaot的属性：实现元素的浮动 1、左浮动（1）两者均未使用浮动时（2）仅box1左浮动（3）仅box2左浮动（4）box1和box2均左浮动 2、右浮动（1）仅box1右浮动（2）仅box2右浮动（3）box1和box2均右浮动二、display的属性：规定元素应该生成的框的类型 (1)display: inline-block (2)覆盖默认的 Display 值 1...

CSS display & float详解

前端小白

09-09

1204

一、display属性 1． display属性的作用是规定元素以什么方式渲染。常用的值如下： none：不被渲染 block：以块级元素渲染 inline：以内联元素渲染 inline-block：以行内块渲染 inherit：继承父级容器的渲染方式 2．元素渲染类型浏览器对每个html元素有默认的渲染类型，默认为块级元素的主要有：div、form、h1-h6、hr、no

第三期《float 与 display:inline-block的区别是什么》

华仔而立的博客

01-09

1242

介绍 HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。默认display:block属性（块级元素） ... ,, ,, 等元素，其显示为block样式，会将一行中其可用的空间给跨越占据，容不下另一个元素与其同行。

CSS display:inline和float:left两者的区别

吃瓜群众的博客

09-20

664

CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:left，是针对块级元素的浮动形式，是不同形式的两种状态。首先我们要明确，CSS display:inline;与float:left;正确含义。CSS display:inline;(内联)《CSS权威指南

对display:inline;与float:left;的认识

深海狂鲨

05-15

909

首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有

display与浮动

weixin_44017414的博客

12-25

840

display： ①none（默认，不显示不占位置） ②block（块级元素） ③inline（行内元素） ④inline-block（行内块级） ------使用display会用空格，删除空格的两种方法：一：上一行的结束标签和下一行的开始标签放在同一行二：增加父类，给父类设置font-size为0px，如果子类有文字，记得在...

float与display

itboy65511的博客

05-10

188

float：left=display：inline-block

float与display:flex的区别

09-03

引用中提到，float和display:flex都可以实现元素横向排列，但存在一定的区别。float是CSS属性，用于将元素浮动到其容器的左侧或右侧，以便其他元素可以在其周围进行布局。而display:flex是一种CSS布局模型，用于将元素放置在一个灵活的容器中，并通过设置容器和子元素的属性来控制元素的排列。具体区别如下： 1. 清除浮动：使用float布局后，需要手动清除浮动，以防止父元素高度塌陷。而使用display:flex布局后，不需要手动清除浮动，容器会自动适应子元素的高度。 2. 响应式布局：使用display:flex可以更方便地实现响应式布局，通过设置容器的属性，可以自动调整子元素的排列方式和大小，适应不同的屏幕尺寸。 3. 布局方式：使用float可以实现元素的左浮动或右浮动，但布局方式相对固定。而使用display:flex可以实现更灵活的布局方式，包括水平排列、垂直排列、换行等。总的来说，float和display:flex都可以实现元素横向排列，但根据不同的需求，选择合适的布局方式可以更好地达到预期的效果。123 #### 引用[.reference_title] - *1* *3* [float:left,display:-webkit-box,display:flex的区别](https://blog.youkuaiyun.com/wll_web/article/details/103551520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [flex-layout-demo:Flex布局教程，包含示例代码](https://download.youkuaiyun.com/download/weixin_42131443/18650333)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]