清浮动与display：inline-block区别

最新推荐文章于 2022-02-25 17:29:05 发布
最新推荐文章于 2022-02-25 17:29:05 发布
阅读量169 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_13425/article/details/82508504
版权

清浮动：由于内部有浮动的内容，所以使其脱离文档流，不影响父类的正常文档流，如此，外面的容器的高度不会因为内部内容而撑开，

前提条件是：：块级元素+父级容器的高度是自适应的（height未设置或者是height：auto）

display：inline-block：针对块级元素和内联元素的属性效果的互换，如块级元素行内制和内联元素的块级效果等

清除浮动（常用的四种方式）
Indomite的博客
10-10 2521
问：为什么要清楚浮动呢？ 答：由于浮动元素会脱离原来的文档流，不占用页面的空间，导致父元素因为子元素的浮动引起内部高度为0的情况，导致页面显示不正常。 用个例子展示一下 首先，这是没有使用浮动的情况：，父元素没有设置宽高，但是被子元素的高撑起来了，至于宽的话，我们知道，div是属于块级元素，默认占一行。 然后，我们先给小子元素添加浮动，让其脱离文本流，观察父元素的变化。这时候我们观察到，当小子元素脱离了文本流之后，父元素自是根据大子元素（未脱离文本流）的高度进行变化。 最后，我们在将大小两个子元素都设置
display与浮动
weixin_44017414的博客
12-25 811
display：      ①none（默认，不显示不占位置）           ②block（块级元素）         ③inline（行内元素）        ④inline-block（行内块级） ------使用display会用空格，删除空格的两种方法： 一：上一行的结束标签和下一行的开始标签放在同一行 二：增加父类，给父类设置font-size为0px，如果子类有文字，记得在...
对display:inline;与float:left;的认识
深海狂鲨
05-15 888
首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有
浮动和display
weixin_56319791的博客
01-08 467
浮动 作用 浮动的作用就是使元素并排显示 特点 第一个盒子会紧贴父盒子边，第二个浮动的盒子会贴第一个浮动的盒子… 依次类推 特性 脱离标准文档流 收缩的效果 字维 设置浮动，任意的标签 都可以设置宽高 要浮动一起浮动，有浮动，清除浮动 浮动带来的影响：浮动使元素脱离了标准文档流，元素不占文档的位置，撑不起父盒子的高度，影响页面布局 清除浮动的方式 给父盒子设置固定高度 内墙法，在浮动元素的后面加一个空的块级标签，并设置类clearfix设置clear:both,清除浮动 给父元素设置overflow:hi
css之display:inline-block布局和浮动布局对比
wordpython
02-23 2301
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display与float的区别
qq_43372535的博客
11-30 992
display display属性 display特性 块级元素与行级元素的转变 控制块元素排到一行 控制元素的显示和隐藏 float float属性 display：inline-block和float的区别 display可以让元素排在第一行，并且支持宽度和高度代码实现起来方便 位置方向不可控，会解析空格 IE6.IE7上不支持 float可以让元素排在一行并制作宽度和高度，可以决定排列方向 float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添..
display:inline-block的使用示例
09-25
在给定的示例中，我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。 在传统的多列布局中，我们通常使用`float:left`来实现元素并排显示。然而，这种方法存在一个问题，即如果父容器的宽度小于...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...
有关display:inline-block在FF出现空白的解决方案
03-17
4. **使用浮动布局**：虽然`float:left`或`float:right`不是`display:inline-block`，但它可以实现类似的效果，并且不会受到空白的影响： ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**：...
使用display:inline-block居中没有宽度的元素
09-25
当一个元素设置为`display: inline-block`，它既能保持内联元素的宽度由内容决定，又能像块级元素一样进行水平居中，同时还能包围浮动元素。 然而，`inline-block`元素的一个限制是，它们的外边距不能设置为`auto`...
display：inline-block 和float：left块级行内标签和浮动的区别
XYLHxylh的博客
09-06 566
inline-block的意思是左右排列，宽高也有效的，然而，不设置inline-block设置左浮动也可以实现左右排列宽高有效，但他们肯定是有区别的，不同的场景可以用不同的方法。 <div style="width: 100px;height: 130px;background-color: olivedrab;display: inline-block">&lt...
CSS display与浮动，一看就明白
weixin_47556601的博客
02-06 670
大家好，今天给大家分享一下CSS display与浮动 写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px;
拜拜了,浮动布局-基于display:inline-block的列表布局 张鑫旭博客笔记
sentimental_dog的博客
08-09 2645
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1194 一、列表浮动布局的局限 所以，如果我们要使用浮动布局列表，就必须限高，于是，不得已，需要裁掉超多的用户名信息。 浮动本身就是个魔鬼，所以，使用浮动布局还需要修复其带来的副作
CSS19：display和float对比
搬运工
02-25 509
display 和 float 都可以使元素在同一行，但是也各有缺点。 display：元素方向不可能控制 float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
display：inline和display：block， display：inline-block区别，清除浮动的方法
Executioner975的博客
11-03 1158
display：inline和display：block， display：inline-block区别，清除浮动的方法 实现简单的div并排 inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元
display:inline转载
weixin_43998771的博客
04-17 394
https://www.cnblogs.com/Ry-yuan/p/6848197.html
CSS之使用display:inline-block来布局
糖长老莫小贝的博客
09-21 557
本文转载于https://www.cnblogs.com/Ry-yuan/p/6848197.html 感谢博主分享 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是t.
浮动（float）与inline-block的区别
前端啥也不懂
05-12 1969
结论：两者主要区别在于当标签的【高度不一致】时，体现出的差异如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。...
浮动与display:inline-block
热门推荐
全栈启示录
05-03 1万+
有的时候，我们需要使独占一行的两个div能够在一行和谐共处，解决方案大概有两种： 1.为两个div均添加display:line-block属性 2.将两个div都设成浮动的元素 这篇文章将深入探讨二者的区别与联系，此外，还将会带给大家一种垂直居中的新方式
html中display: flex;和display:inline-block;区别
最新发布
12-16
display: flex;和display:inline-block;都可以让块级元素在同一行显示，但是它们之间还是有一些区别的。 display: flex;是CSS3中的新属性，它可以让元素的子元素在一个可伸缩的容器中布局。使用flex布局可以更加方便地实现水平和垂直居中、等高布局等效果。而且，flex布局可以很好地解决浮动元素导致的高度塌陷问题。另外，flex布局还可以通过设置flex-wrap属性来控制子元素的换行。 display:inline-block;可以让元素在同一行显示，并且可以设置元素的宽度、高度、内边距和外边距等属性。但是，使用inline-block布局时，需要注意元素之间的空格和换行符会导致布局出现问题，需要通过设置父元素的font-size: 0;和子元素的font-size: 初始值;来解决这个问题。 综上所述，display: flex;适用于需要更加灵活的布局，而display:inline-block;适用于简单的水平布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值