display:inline-block和float 的区别

最新推荐文章于 2022-07-02 21:36:26 发布
最新推荐文章于 2022-07-02 21:36:26 发布
阅读量642 收藏 2
点赞数 2
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinduan007/article/details/115255469
版权

display:inline-block和float 的区别

共同：都可以让块元素同行显示，根据父标签的宽度自动换行，float换行需要注意浮动标签高度要一致，不然有换行问题。

不同：display：inline-block需要考虑行内块元素之间的间隙。行内块元素之间的垂直对齐；

display：inline-block标签会留在文档流，float标签会脱离文档流

因脱离文档流，float需要考虑父元素高度塌陷问他

float标签需要考虑对其他非浮动元素的问题

float换行需要注意浮动标签高度要一致，不然有换行问题。
qinduan007
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display:inline-block的使用示例
12-13
或许许多人认为直接设置float：left；不就行了 但是这个有一个问题，你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度，而实际中由于子页面中个数不定，因此外面的div块的宽度不能确定，若是外面的div块...
inline-block和float的共性和区别
birthmarkqiqi的专栏
01-19 631
在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？   共性： ①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相
display:inline-block之用法
weixin_30642561的博客
07-31 196
HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。有些HTML元素自然地带有display:block;样式属性，比如<div><h1>...<h6><p>...
对display:inline;与float:left;的认识
深海狂鲨
05-15 858
首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有
display:inline-block与float
m0_53438035的博客
07-24 198
区别 相同处： 具有类似的效果 不同处： display:inline-block将会产生间隙（可使用font-size:0或去除代码中的空格消除） float会脱离文档流（对父元素使用overflow:hidden放置高度坍塌） display:inline-block采用底部对齐解决了float残次不齐的问题 解释： 1： 3： display:inline-block: float: 总结 对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline
CSS中关于float和display: inline-block布局的区别详解
qq1084235321的博客
03-25 4900
当我们想设置几个盒子水平排列时，一般都会想到使用float或者使用display: inline-block。下面就来说一下两者的区别和，各自的优缺点。 inline-block和float的区别 文档流:浮动元素会脱离文档流，并使得周围文本元素环绕这个元素。而inline-block元素仍在文档流内，因此inline-block不需要清除浮动的操作。 水平位置：因为浮动元素脱离...
CSS display:inline和float:left两者区别探讨
09-25
CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，而float表示的是浮动，float:left，是针对块级元素的浮动形式，是不同形式的两种状态，感兴趣的朋友可以了解下
深入了解float与inline-block
12-13
inline-block则在IE8以上(包括8)才能使用,查了下资料,其实IE5.5的时候就已经有inline-block了,只是实现不一样,所以想要兼容低版本的IE就只能用额外的代码 复制代码代码如下:display:inline; //强行不换行 zoom:1; //...
CSS: list-style 和 inline使用方法详解
01-21
平时只顾着写程序，写 div 或 span 或 ul li 之类的，常常遇到一莫名的问题，自己的解决方式可能是 top: -10px 也可能 float:left 之类的，问题当然能得到解决，就好像坐轮船到纽约和坐飞机到纽约的结果一样，都是到...
css(display,float,position)深入理解
12-13
display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | ...
display:inline-block 和float:left 的区别
weixin_30871701的博客
12-08 216
display:inline-block 和float:left 的区别 display是指显示状态，float是针对块级元素的浮动。 使用inline-block：控制元素的垂直对齐跟横向排列元素。 使用浮动：1、让元素环绕某一个元素，对一个元素跟围绕他的一些元素进行更多控制 2、不想处理inline-block带来的空白问题 ...
float 和 inline-block 的区别
a1071626267的博客
07-02 377
float 和 inline-block 的区别
display:inline-block和float
shenjiu2323的博客
03-18 169
我们在制作导航栏等效果时可能会用到这两个属性一，使用浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框的padding或另一个浮动框的为止。同时浮动框的display会变成inline-block（无论本身是块框还是行内框）的形式，此时它可以设置宽高等,并且不会产生由空白节点造成的间距注意：使用float时要注意清除浮动，以免父元素高度塌陷。二，使用display:inline-block可...
float和display:inline-block
q_A_p的博客
11-21 537
float和display:inline-block    都能使两个块形元素并排 下面是div部分代码 使用float时结果是 *{ padding: 0; margin: 0; } .left{ width: 50%; height: 100px; float: left;
浅谈float和display:inline-block
qq_41904178的博客
12-26 436
1、首先先解释下display的几个属性：inline,block,inline-block; (1)inline:       a、把元素变成行内元素，也就是它可以和其它的元素共占据一行。       b、元素的大小由其内容自动撑开，其宽高是不可修改的。       c、可以使用margin、padding,top,bottom产生边距。       eg:   &lt;span&g...
display:inline与float:left的区别
欢迎大家对日志做评论，有转载有自编，难免存在错误，望大家顺手指正，谢谢！^_^
07-08 863
实现效果似乎相同，都是显示在一行。区别在于使用了display:inline，则该元素变为了内联元素，即宽高无效；float则使元素变为块元素，且宽高属性有效。 .d{width:100px; height:50px; background:#009966; float:left;} DIV1 IDV2 效果图：float:left 将float:left改为display
学习记录：CSS之使用display:inline-block与float布局的区别
人生苦短，何妨一试
07-12 232
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 能够改变元素的height，w
css之float布局与display:inline-block布局
qq_53233068的博客
08-06 334
diplay常见属性 1.none此元素不会被显示 2.block此元素将被显示为块级元素，前后带有换行符 块级元素特性： ·块级元素独占一行，不设置高度的情况下，会撑满父元素的宽度 ·宽高可以设置 ·可以设置margin、padding的属性值，四边都可以 3.inline"默认"此元素会被显示为内联元素，元素前后没有换行符 行内元素特性： ...
display:inline和float:left实现行内布局的区别
gswwxyhk的博客
04-24 299
display:inline和float:left实现行内布局的区别 原文地址：https://blog.csdn.net/danchejikafo/article/details/52334037 float:left是让元素浮动在左边而已，元素的占位属性还是块级属性，height属性还是有效。 display:inline是让元素的占位属性变成内联属性，height无效 设了float:...
<form style="display:inline-block;" method="post" action="#"> <button class="information-btn" type="submit" id="all-btn">全部员工</button> </form> <form style="display:inline-block;" method="post" action="#"> <button class="information-btn" type="submit" id="new-btn">添加员工</button> </form> <form style="display:inline-block;" method="post" action="#" style="float: right;"> <button class="information-btn1" type="submit" id="chaxun-btn">查询</button> <input type="text" id="chaxun-text" name="chaxuntext" placeholder="请输入要查询的员工信息" value=""> </form>将对三个form放在同一行的右边
最新发布
06-12
<form style="display:inline-block; float:left;" method="post" action="#"> <button class="information-btn" type="submit" id="all-btn">全部员工 <form style="display:inline-block; float:left;" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值