display:inline与float:left的正确解释

最新推荐文章于 2022-02-25 17:29:05 发布
转载 最新推荐文章于 2022-02-25 17:29:05 发布 · 1.7k 阅读 · 1
文章标签：

#float #文档 #css

本文详细解释了CSS中display:inline;与float:left;的区别。前者让元素以行布局形式显示，后者使元素脱离文档流产生特殊布局效果。文章强调了内联元素不能设置宽高的特性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

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

　　当然这看起来不像是display:inline;与float:left;的区别所在，但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

　　那么我们很清楚了，内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高

清除浮动（常用的四种方式）
Indomite的博客
10-10 2577
问：为什么要清楚浮动呢？ 答：由于浮动元素会脱离原来的文档流，不占用页面的空间，导致父元素因为子元素的浮动引起内部高度为0的情况，导致页面显示不正常。 用个例子展示一下 首先，这是没有使用浮动的情况：，父元素没有设置宽高，但是被子元素的高撑起来了，至于宽的话，我们知道，div是属于块级元素，默认占一行。 然后，我们先给小子元素添加浮动，让其脱离文本流，观察父元素的变化。这时候我们观察到，当小子元素脱离了文本流之后，父元素自是根据大子元素（未脱离文本流）的高度进行变化。 最后，我们在将大小两个子元素都设置
对display:inline;与float:left;的认识
深海狂鲨
05-15 918
首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有
关于display:inline;和float:left;
电子商务 asp.net ajax
11-14 1069
display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:left，是针对块级元素的浮动形式，是不同形式的两种状态。）http://www.andymao.com/andy/post/42.html http://bbs.blueidea.com/thread-2596793-1-1.
认识display:inline;与float:left;
关注前端开发
04-04 262
一.     首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复...
display:inline和float:left实现行内布局的区别
gswwxyhk的博客
04-24 346
display:inline和float:left实现行内布局的区别 原文地址：https://blog.youkuaiyun.com/danchejikafo/article/details/52334037 float:left是让元素浮动在左边而已，元素的占位属性还是块级属性，height属性还是有效。 display:inline是让元素的占位属性变成内联属性，height无效 设了float:...
display:inline-block和float 的区别
qinduan007的博客
03-26 749
display:inline-block和float 的区别 共同：都可以让块元素同行显示，根据父标签的宽度自动换行，float换行需要注意浮动标签高度要一致，不然有换行问题。 不同：display：inline-block需要考虑行内块元素之间的间隙。行内块元素之间的垂直对齐； display：inline-block标签会留在文档流，float标签会脱离文档流 因脱离文档流，float需要考虑父元素高度塌陷问他 float标签需要考虑对其他非浮动元素的问题 float换行需要注意浮动标签高度要一致
CSS display:inline和float:left两者区别探讨
01-19
本文和大家重点讨论一下CSS display:inline和float:left两者的区别，CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:...
display:inline-block的使用示例
09-25
将`.list`元素的`float:left`属性替换为`display:inline-block`，这样每个`.list`元素会像文本字符一样在一行内尽可能地排列，直到没有足够的空间为止。为了防止元素间的空白间隙（由于元素间的空格或者换行符引起）...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
为了解决这个问题，本文将详细介绍两种方法，使得这些旧版IE浏览器也能正确地处理`display:inline-block`。 方法一：使用`display:inline`覆盖`display:inline-block` 这种方法基于IE6和IE7的一个特性，它们会忽略...
有关display:inline-block在FF出现空白的解决方案
03-17
4. **使用浮动布局**：虽然`float:left`或`float:right`不是`display:inline-block`，但它可以实现类似的效果，并且不会受到空白的影响： ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**：...
display与浮动
weixin_44017414的博客
12-25 848
display：      ①none（默认，不显示不占位置）           ②block（块级元素）         ③inline（行内元素）        ④inline-block（行内块级） ------使用display会用空格，删除空格的两种方法： 一：上一行的结束标签和下一行的开始标签放在同一行 二：增加父类，给父类设置font-size为0px，如果子类有文字，记得在...
display:inline与float:left的区别
欢迎大家对日志做评论，有转载有自编，难免存在错误，望大家顺手指正，谢谢！^_^
07-08 942
实现效果似乎相同，都是显示在一行。区别在于使用了display:inline，则该元素变为了内联元素，即宽高无效；float则使元素变为块元素，且宽高属性有效。 .d{width:100px; height:50px; background:#009966; float:left;} DIV1 IDV2 效果图：float:left 将float:left改为display
CSS中关于float和display: inline-block布局的区别详解
qq1084235321的博客
03-25 5189
当我们想设置几个盒子水平排列时，一般都会想到使用float或者使用display: inline-block。下面就来说一下两者的区别和，各自的优缺点。 inline-block和float的区别 文档流:浮动元素会脱离文档流，并使得周围文本元素环绕这个元素。而inline-block元素仍在文档流内，因此inline-block不需要清除浮动的操作。 水平位置：因为浮动元素脱离...
浮动和display
weixin_56319791的博客
01-08 491
浮动 作用 浮动的作用就是使元素并排显示 特点 第一个盒子会紧贴父盒子边，第二个浮动的盒子会贴第一个浮动的盒子… 依次类推 特性 脱离标准文档流 收缩的效果 字维 设置浮动，任意的标签 都可以设置宽高 要浮动一起浮动，有浮动，清除浮动 浮动带来的影响：浮动使元素脱离了标准文档流，元素不占文档的位置，撑不起父盒子的高度，影响页面布局 清除浮动的方式 给父盒子设置固定高度 内墙法，在浮动元素的后面加一个空的块级标签，并设置类clearfix设置clear:both,清除浮动 给父元素设置overflow:hi
display与float的区别
qq_43372535的博客
11-30 1045
display display属性 display特性 块级元素与行级元素的转变 控制块元素排到一行 控制元素的显示和隐藏 float float属性 display：inline-block和float的区别 display可以让元素排在第一行，并且支持宽度和高度代码实现起来方便 位置方向不可控，会解析空格 IE6.IE7上不支持 float可以让元素排在一行并制作宽度和高度，可以决定排列方向 float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添..
CSS display与浮动，一看就明白
weixin_47556601的博客
02-06 707
大家好，今天给大家分享一下CSS display与浮动 写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px;
清浮动与display：inline-block区别
iteye_13425的博客
05-14 199
清浮动：由于内部有浮动的内容，所以使其脱离文档流，不影响父类的正常文档流，如此，外面的容器的高度不会因为内部内容而撑开， 前提条件是：：块级元素+父级容器的高度是自适应的（height未设置或者是height：auto） display：inline-block：针对块级元素和内联元素的属性效果的互换，如块级元素行内制和内联元素的块级效果等 ...
CSS19：display和float对比
搬运工
02-25 548
display 和 float 都可以使元素在同一行，但是也各有缺点。 display：元素方向不可能控制 float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
页面布局——float之清除浮动
樊云飞
04-18 347
长期以来，很多人都以为清浮动的含义就是清除浮动，实际上清浮动是指清除浮动造成的影响，即给子元素使用float 会造成父级元素高度塌陷，为此需要清浮动。 浮动破坏了 line-box 才会浮动； 本质： 清除浮动的影响，解决父级元素塌陷； 解决方法： 给父级元素设置高度（局限性：在子元素高度不固定的情况下无法解决，扩展性不好）； clear:both; .clear{ *zoom:1;//缩放，...
display: inline-block 和其他元素有缝隙
最新发布
01-04
### 解析 Inline-Block 元素间的间距 HTML 和 CSS 中，`inline-block` 显示模式允许元素像行内元素一样排列，同时保持块级元素的特性。然而，在实际应用中，这些元素之间会出现不必要的空白间隙。 #### 原因分析 当 HTML 文档中有换行符或空格存在于相邻 `inline-block` 元素之间时，浏览器会将其视为单个字符宽度的空间[^3]。这种现象源于早期 Web 设计对于英文文本排版的需求，其中单词间通常需要空格分隔。 #### 方案一：调整父容器字体大小 通过设置父容器的 `font-size` 属性为零可以有效消除子元素间的额外空间： ```css .parent { font-size: 0; } .child { display: inline-block; font-size: 16px; /* 恢复正常文字尺寸 */ } ``` 这种方法简单易行，适用于大多数场景下的布局需求[^2]。 #### 方案二：移除源码中的空白节点 另一种解决方案是在编写 HTML 结构时不留下任何多余的空白字符，即让多个 `inline-block` 元素紧密相连，不留空隙。这可以通过删除标签之间的换行和缩进来实现: ```html <div class="no-space"> <a href="#">链接</a><a href="#">链接</a><a href="#">链接</a> </div> ``` 尽管此法能解决问题，但在维护性和可读性方面有所欠缺[^5]。 #### 方案三：浮动定位 (Float) 给定 `inline-block` 元素添加 `float:left` 样式也可以规避上述问题的发生。不过需要注意的是，采用这种方式可能会引发其他潜在的设计挑战，比如清除浮动等问题[^4]: ```css .item { float: left; display: inline-block; } ``` #### 推荐实践 综合考虑开发效率与用户体验，推荐优先尝试 **方案一** —— 修改父级容器的 `font-size` 来控制子项间距。如果遇到特殊情况，则可以根据具体项目特点灵活选用其它策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值