display与float的区别

最新推荐文章于 2023-03-09 12:39:34 发布
最新推荐文章于 2023-03-09 12:39:34 发布
阅读量938 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43372535/article/details/121625053
版权

display

display属性

display特性

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

控制块元素排到一行

控制元素的显示和隐藏

 float

float属性

 display：inline-block和float的区别

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

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

IE6.IE7上不支持

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

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

hhhhhhhhhhyou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 5——常见”display”属性、浮动（float）、如何清除浮动带来的影响、定位（position）、列表样式、其他样式补充
ranran0306的博客
03-12 1194
1、标签的几种常见”display”属性 block “块”元素 inline “行内”元素 inline-block 行内块元素 none 隐藏 块元素、行内元素和行内块元素可以互相转化 2、浮动（float） float : left 左浮动 float ：right 右浮动 float : none 默认 不浮动 加了浮动的元素会自动块化 3、如何清除浮动带来的影响 1.给父元素加height 2.给父元素加overf...
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边 浮动的目的： 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性 1.任何申明为 float 的元素自动被设
CSS19：display和float对比
搬运工
02-25 456
display 和 float 都可以使元素在同一行，但是也各有缺点。 display：元素方向不可能控制 float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
《CSS学习笔记》之display、浮动float，及其四种解决父级元素塌陷问题的方法
每天八杯水的博客
12-22 968
1.浮动元素后面增加空div简单，代码中尽量避免空div 2.设置父元素的高度 简单，元素假设有了固定的高度，就会被限制 3. overflow 简单，下拉的一些场景避免使用 4.父类添加一个伪类:after(推荐) 写法稍微复杂一点，但是没有副作用，推荐使用!
Web前端 学习知识点总结（四）之display 和 float
weixin_45118229的博客
10-07 667
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、display1.页面的布局2.display的内的属性3.hover隐藏案例二、使用步骤1.引入库2.读入数据总结 前言 本文来总结一下display和float，两者为了页面的合理布局而设计的。 提示：以下是本篇文章正文内容，下面案例可供参考 一、display
CSS display & float详解
前端小白
09-09 1085
一、display属性 1．  display属性的作用是规定元素以什么方式渲染。常用的值如下： none：不被渲染 block：以块级元素渲染 inline：以内联元素渲染 inline-block：以行内块渲染 inherit：继承父级容器的渲染方式 2．  元素渲染类型 浏览器对每个html元素有默认的渲染类型，默认为块级元素的主要有：div、form、h1-h6、hr、no
浮动display和float
屿屿屿屿屿的博客
06-27 969
块级元素：独占一行 h1-h6 p div 列表…行内元素：不独占一行 span a img strong 3、float 1、左右浮动 float 4、父级边框塌陷问题(以float为例) 增加父级元素的高度 增加一个空的div标签，设置属性 父级元素增加属性 父类增加一个伪类 小结：**浮动元后面增加空div简单，代码中尽量避免空div设置父元素的高度简单，元素假设有了固定的高度，就会被限制overflow简单，下拉的一些场景避免使用父类添加一个伪类：after写法稍微复杂一
CSS display:inline和float:left两者区别探讨
09-25
`display:inline` 和 `float:left` 的主要区别在于： 1. **布局方式**：`display:inline` 保持元素在行内排列，而 `float:left` 则使元素脱离正常文档流并允许其他元素环绕它。 2. **宽度和高度**：内联元素不能...
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
display和float
是略不是咯的博客
08-04 230
display和float **块级元素：**独占一行，里面可以放行内元素，类似于一个大容器 <h1><p><li><div>等 **行内元素：**放在一行里面的元素，类似于一个一个小组件，设置高度没有效果 <img><em><strong><span>等 块级和块级一起放时会垂直排列，行内元素可以放在一行里。 可以用display来更换块级和行内 display:block /*变成块级元素*/ disp
display和float使用上的区别（1）-----多栏布局的实现
weixin_33674976的博客
04-07 384
在说这个问题之前，先简要介绍下display和float这两个属性。 float属性控制html组件是否浮动与如何浮动，当通过该属性设置某个对象浮动后，该对象将被当成块组件处理。它有left和right两个值，分别指定对象向右向左浮动。 而display属性用于规定元素应该生成的框的类型。来看下display可取的值：通过上述介绍可以看出，其实float和...
CSS浮动（display、float、边框塌陷、溢出处理）
baolingye的博客
06-19 2502
CSS浮动 一、标准文档流 标准文档流指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。 这也是元素默认的排列方式 ，浮动一般用于图片，也可用于页面布局 标准文档流的组成 u块级元素（block） h1~h6 、p 、 div 、列表 内联元素（inline） span 、 a 、 img 、 strong 内联标签可以包含于块级标签中，成为它的子元...
刚刚学完CSS ：display float，flex flow 傻傻分不清了
LlanyW的专栏
03-09 2219
刚刚学完CSS ,导致浮动（float），弹性布局（display:flex）好几个字段配置属性已经分不清了。适用于小的UI元素，grid属性适合用于为网站整体进行布局而float属性适合在较大的文本文章中设置图像。float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。display float 就同层级别，都是布局的配置项目。在CSS布局中，flex、grid以及float属性的差别是。float：浮动是一种传统网页的布局方式。float 是CSS一个针对子元素布局的。
清除浮动（常用的四种方式）
Indomite的博客
10-10 2467
问：为什么要清楚浮动呢？ 答：由于浮动元素会脱离原来的文档流，不占用页面的空间，导致父元素因为子元素的浮动引起内部高度为0的情况，导致页面显示不正常。 用个例子展示一下 首先，这是没有使用浮动的情况：，父元素没有设置宽高，但是被子元素的高撑起来了，至于宽的话，我们知道，div是属于块级元素，默认占一行。 然后，我们先给小子元素添加浮动，让其脱离文本流，观察父元素的变化。这时候我们观察到，当小子元素脱离了文本流之后，父元素自是根据大子元素（未脱离文本流）的高度进行变化。 最后，我们在将大小两个子元素都设置
display和float （04）
yihjh的博客
11-02 460
display display block 块元素 inline 行内元素 inline-block 行内块元素 行内--不换行 块---设置宽高 none 不显示 inline-block 存在的问题 font-size:0; 加在父组件上，同时在子标签上再次设置font-size 子元素实际高度不一致时，需要vertical-align:top; 设置顶部对齐 无法做到右对齐 <!DOCTYPE html&g...
浮动float和display
weixin_44011306的博客
06-26 685
浮动float和display浮动样式 floatcss 浮动示例常规浮动效果1常规浮动效果2常规浮动效果3常规浮动效果4float 浮动实际应用场景：clear 清除浮动：float 浮动副作用-塌陷父元素：display 设置元素框类型 浮动样式 float 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，使用浮动的元素会默认转换为块儿级。 css 浮动示例 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 常规浮动效果1 当框 1
position属性，display属性，float属性
weixin_57727027的博客
05-08 442
position属性，display属性，float属性 讲到盒模型，有三大属性可以用来控制页面的排版。 三大属性：position属性，display属性，float属性。 ①position 属性控制页面上元素间的位置关系。规定元素的定位类型。 定义建立元素布局要用的定位机制，每一个元素都是可以定位的，不论此元素本身是什么类型，绝对定位（absolute）的元素或固定定位（fixed）的元素会生成一个块级框。 而相对定位（relative）的元素会相对于它自身在正常的文档流中的默认..
display和visibility的用法和区别
weixin_30485291的博客
11-30 802
display和visibility的用法和区别 更多 2013/11/17 来源：css学习浏览量：892 学习标签： css display visibility 本文导读：大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所...
对display:inline;与float:left;的认识
深海狂鲨
05-15 863
首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有
float与display:flex的区别
最新发布
09-03
引用中提到，float和display:flex都可以实现元素横向排列，但存在一定的区别。float是CSS属性，用于将元素浮动到其容器的左侧或右侧，以便其他元素可以在其周围进行布局。而display:flex是一种CSS布局模型，用于将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值