浮动的特点

最新推荐文章于 2022-10-19 16:42:03 发布
最新推荐文章于 2022-10-19 16:42:03 发布
阅读量369 收藏
点赞数
分类专栏： css3 css 前端 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/softlipaaa/article/details/118424843
版权
前端 同时被 3 个专栏收录
65 篇文章 2 订阅
订阅专栏
css3
47 篇文章 0 订阅
订阅专栏
css
42 篇文章 0 订阅
订阅专栏

浮动的特点

浮动的特点

1、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，因此我们可以利用浮动来设置文字环绕图片的效果

2、元素设置浮动后，将会脱离文档流。
从文档流脱离后，元素的一些特点也会发生变化

因此这里引出元素脱离文档流的特点：

元素浮动后脱离文档流的特点

对于块元素

1、块元素不再独占一行

2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

对于行内元素

1、脱离文档流以后，特点和块元素一样

总结：脱离文档流以后，不需要再区分块元素和行内元素了，即变成了行内块元素

大毛驴啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浮动的简介和特点
WQuestion的博客
10-10 1292
目录 一、浮动的简介 二、浮动的特点 三、浮动的其他特点 四、脱离文档流的特点 一、浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性设置元素的浮动 可选值： none默认值元素不浮动 left元素向左浮动 right元素向右浮动 【注...
CSS浮动以及浮动特点
qq_45902025的博客
03-06 296
CSS浮动以及浮动特点
浮动的作用、特点、相关使用以及清除浮动效果
NewHouser的博客
10-19 1190
浮动、清除浮动、标准流
如何清除浮动
weixin_34087307的博客
11-09 345
本文概述 本文的框架图如下： 一、浮动到底是什么？ W3school中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 二、浮动有什么特点？ 浮动的特点，可以用八个字总结：脱标、贴边、字围和收缩。 为了更好说明，请看下图： 当框 1 向左浮动时，它脱离文档流（脱标）并...
浮动密封在煤矿机械上的应用探讨
06-03
浮动密封具有结构简单、工作可靠、寿命长、磨损后自动补偿等优点,文章主要介绍了浮动密封的结构特点、浮动密封在煤矿机械上应用时需要注意的事项,并对浮动密封的失效原因进行分析。
基于默认路由及浮动路由的公司与分部互联.rar
02-15
1、资源内容：Word文档和topo文件 ...4、特点：Word文档提供了实验的详细过程，包括每一步骤的操作命令和截图，并给出了实验的topo文件（包括配置信息） 5、适用人群：网络系统的建设与运维 6、使用说明:重点内容已标红
CSS实现元素浮动和清除浮动的方法
11-21
在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。 浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一...
YAdvBox 固定浮动广告特效
05-18
摘要:脚本资源,Ajax/JavaScript,浮动层,浮动广告　一个独立的浮动广告类，基本的功能都有了，很好用的，可以设置自定义显示位置和显示时间，如果你想类似的广告效果，这个应该是一个不错的选择。 　程序特点： 　1. ...
深入理解css布局之定位与浮动
12-03
上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。...
html图片靠右浮动 文字左侧环绕,如何解决浮动元素周围环绕文字
weixin_35924773的博客
05-30 1638
大家在Web页面制作中时常有碰到浮动元素被周围的文环绕的现像，这种现像时常发生在当浮动元素周围的内容高度大小于浮动元素的本身高度时，其内容就会环绕浮动元素，如下图所示：可是我们时常需要的不是这种效果，而以需要达到下图所示的效果：那么要实现上图所展示的效果其实并不是件很复杂的事情，我想大家都有自己的解决方法，只不过哪种方法是最简单而且是最实用的。前面我在《十个CSS小技巧》一文中的第四个小技巧中展示...
CSS图片在父元素内部浮动，为什么文字会环绕而不是被覆盖，原理分析
weixin_43163281的博客
12-30 1221
既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合？ 第一，绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除，并相对于其包含块定位（包含块可能是文档中的另一个元素或者是初始包含块），元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话，元素B占据元素A之前的位置，与元素A重合在一起，并被元素A覆盖。如图所示。 而浮动，会以某种方式将浮动元素从文档的正常流中删除，并把浮动元素向左边和右边浮动，不过
浮动及其特点
rbh200812的博客
08-09 531
浮动小知识
认识浮动及相关知识点的理解
Zyf15156243165的博客
08-09 249
浮动的相关知识点
CSS浮动元素特点有什么
qinge_Crazy的博客
08-17 777
　　什么是浮动? 　　元素的浮动是指设置了浮动属性(flot)的元素。 　　CSS浮动有什么作用? 　　1.让多个盒子水平排列成一行，浮动成为布局的重要手段; 　　2.可以实现盒子的左右对齐等等; 　　3.浮动最早是用来控制图片，实现文字环绕图片的效果。 　　CSS浮动的语法： 　　选择器 { float: 属性值; } 　　float: left; 左浮动 　　float: right; 有浮动 　　浮动元素的特点： 　　1.漂浮在标准流的上面。 脱离标准流。俗称 “脱标” 。 ..
HTML：厉害的浮动（浮动的特点）
m0_64054560的博客
03-31 4430
浮动的特点：特点： 1、元素一旦做了浮动，就会漂浮起来不占位置，后面的元素会向前补齐 2、浮动的元素是覆盖不了文字和图片的 （前两条专业话术：半脱离文档流/半脱标） 3、如果多个元素做的都是左浮动，那么元素就是从左到右依次横向排列；如果多个元素做的都是右浮动，那么元素就是从右到左依次横向排列。 4、如果一行放不下了，是会自动换行的。 5、如果没有设置宽度，并且元素做了浮动，那么这个元素的宽度是由内容决定的。 6、元素一旦做了浮动，那么无论是什么元素都可以添加宽高了。
CSS中浮动的特点
安静的对折的专栏
08-31 5565
我们在给标签设置浮动后，会有一下几个特点 1 浮动会脱离标准流       如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断 2 浮动的元素会影响下面的元素，不会影响上面的元素 * {
浮动特点及相关问题
WRITE LESS，DO MORE
05-06 1527
CSS中的定位机制：普通流，浮动，绝对定位。 1.普通流： 普通流 （normal flow)，或者称之为常规流。也是我们通常称呼的“文档流”。 2.浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局，只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。
浮动定位
最新发布
05-30
浮动（float）是 CSS 中一种常见的定位方式，通过将元素从正常文档流中脱离出来并向左或向右移动，从而实现对页面的布局和排版。...每种定位方式都有其特点和应用场景，需要根据具体情况选择合适的方式进行布局和排版。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值