浮动的特点

最新推荐文章于 2023-03-06 19:07:51 发布
最新推荐文章于 2023-03-06 19:07:51 发布
阅读量252 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45022424/article/details/117554805
版权

浮动的作用:实现页面的横向布局,特别是块元素与块元素之间复杂的横向布局

浮动的特点:

                  使元素脱离文档流

浮动对块(行)元素的影响(特点):

                   1.块元素不在独占一行(块元素)

                     2.块元素的宽高默认由内容撑开(块元素)

                     3.块元素margin的左右auto失效(块元素)

                       4.脱离文档流

                       5.支持宽高设置,支持上下的padding,border,margin(行元素)

 

孤独使者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浮动的简介和特点
WQuestion的博客
10-10 1313
目录 一、浮动的简介 二、浮动的特点 三、浮动的其他特点 四、脱离文档流的特点 一、浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性设置元素的浮动 可选值： none默认值元素不浮动 left元素向左浮动 right元素向右浮动 【注...
通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）
wangshuo0520ai的博客
03-01 852
通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）
CSS浮动以及浮动特点
qq_45902025的博客
03-06 312
CSS浮动以及浮动特点
浮动以及浮动的特性
SHADOW_RJ的博客
11-24 178
概念：浮动可以让元素脱离文档流，按照指定的方向进行排列，直接遇到父元素的边界或另外一 个浮动元素（停止）；2，为浮动元素的父盒子添加overflow属性；原因：网页中有很多布局效果，标准的布局方式没法完成，使用浮动改变元素的默认排列方式。优缺点：不够灵活，适用于高度固定的布局中；4，可以使行级元素设置宽高；2，可以使元素脱离文档流；1，子元素会浮动会脱离正常标准文档流，会导致父元素高度塌陷；1，给浮动元素父级设置一个固定高度；浮动特性：1，可以使块级元素在一排排列；
HTML：厉害的浮动（浮动的特点）
m0_64054560的博客
03-31 4729
浮动的特点：特点： 1、元素一旦做了浮动，就会漂浮起来不占位置，后面的元素会向前补齐 2、浮动的元素是覆盖不了文字和图片的 （前两条专业话术：半脱离文档流/半脱标） 3、如果多个元素做的都是左浮动，那么元素就是从左到右依次横向排列；如果多个元素做的都是右浮动，那么元素就是从右到左依次横向排列。 4、如果一行放不下了，是会自动换行的。 5、如果没有设置宽度，并且元素做了浮动，那么这个元素的宽度是由内容决定的。 6、元素一旦做了浮动，那么无论是什么元素都可以添加宽高了。
dsa浮动图标
05-04
10. **适配多平台**：浮动图标的设计和实现需要考虑不同操作系统的特点和限制，例如Android和iOS在权限管理、API调用等方面存在差异，开发时需要针对不同平台进行适配。 总结起来，"dsa浮动图标"是用户界面设计中的...
CSS学习之四 浮动
09-25
这种行为导致了以下特点： 1. 浮动元素不会占据原来在文档流中的空间，因此它后面的块级元素会移动到浮动元素的旁边，只要空间允许。 2. 即使内容会环绕浮动元素，但边框和背景却会忽略这个浮动元素，直接贴合上一...
css 如何清除浮动的示例代码
09-22
浮动的主要特点包括： 1. 脱标：浮动元素脱离了普通文档流，不再影响后面元素的位置。 2. 贴边：浮动元素向左或向右移动，直到碰到容器边框或其他浮动元素。 3. 字围：文本和其他非浮动元素会围绕浮动元素排列。 4. ...
浮动密封在煤矿机械上的应用探讨
06-03
浮动密封具有结构简单、工作可靠、寿命长、磨损后自动补偿等优点,文章主要介绍了浮动密封的结构特点、浮动密封在煤矿机械上应用时需要注意的事项,并对浮动密封的失效原因进行分析。
css hack之清除浮动(clearfix)
09-25
在Web布局中，浮动元素（如`.fl`和`.fr`）常被用来实现多列布局，但它们的一个副作用是可能导致父元素无法正确包裹这些浮动元素，从而引发“高度塌陷”...在实际开发中，应根据项目特点灵活选择最适合的清除浮动策略。
CSS布局方式之流动布局、浮动布局、定位布局讲解
weixin_44860226的博客
07-20 4960
css三种常规的布局方式，流动布局、浮动布局、定位布局等讲解
认识浮动及相关知识点的理解
Zyf15156243165的博客
08-09 265
浮动的相关知识点
浮动特点及相关问题
WRITE LESS，DO MORE
05-06 1531
CSS中的定位机制：普通流，浮动，绝对定位。 1.普通流： 普通流 （normal flow)，或者称之为常规流。也是我们通常称呼的“文档流”。 2.浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局，只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。
css 浮动特点
a695005548的博客
04-13 265
css浮动特点 浮动会让元素脱离标准文档流。标准文档流的理解不做阐述。这里只记录下标准文档流中元素的特点： 块元素： 1、块元素会在标准文档流中独占一行，自上而下排列 2、如果不设置宽高，块元素默认宽度为父元素的100%，高度则被内容撑开 内联元素： 1、内联元素在标准文档流中只占自身的大小，自左向右排列，并会自动换行。 2、内联元素的宽度和高度均由内容撑开，设置宽高无效 而脱离文档流之后，元素的特点为下 块元素： 块元素脱离标准文档流之后，如果不设置宽高，则默认被内容撑开，宽度默认不再
浮动的特征
jameszhufu的博客
05-21 944
1.块元素失去块元素的特征，变为行内元素 2.紧贴上一个浮动元素或父级元素的边框，宽度不够换行显示 3.占据行内空间，行内元素环绕显示 ...
浮动的7大特性
DangR_Jisoo的博客
11-24 297
浮动的特性 浮动的元素会脱离标准流 <style> * { margin: 0; padding: 0; } .box1 { width: 500px; margin: 100px auto; border: 10px solid red; } .box2 { /* fl
浮动
weixin_30481087的博客
01-12 80
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动其父元素中指定位置的过程 语法格式 Float:属性值（left right none） Display：inline-block 将块元素转换为行内块元素，可以放在一行上，有宽度和高度，但是这种布局方式，每个盒子直接有空隙，几乎是不可能去掉的。 浮动特性 浮动脱离标准流，不占位置，浮动元素总是找离它最近的父元素对齐，...
浮动的简介与特点
jx_NChen的博客
10-22 367
浮动的简介 特点
浮动定位
最新发布
05-30
浮动（float）是 CSS 中一种常见的定位方式，通过将元素从正常文档流中脱离出来并向左或向右移动，从而实现对页面的布局和排版。 浮动元素可以通过 `float` 属性进行设置，常见的属性值有 `left`（向左浮动）和 `right`（向右浮动）。例如，下面的 CSS 代码会将 `div` 元素向左浮动： ```css div { float: left; } ``` 浮动元素会脱离出正常文档流，使得后续元素可以环绕在其周围，因此浮动元素常用于实现多栏布局、图文混排等效果。同时，浮动元素也可以设置宽度和高度等样式属性，但需要注意的是，设置了浮动属性的元素会导致其父元素的高度塌陷，需要通过清除浮动（clear float）来避免这种问题。 除了浮动之外，CSS 中还有其他的定位方式，包括相对定位（relative）、绝对定位（absolute）和固定定位（fixed）等。每种定位方式都有其特点和应用场景，需要根据具体情况选择合适的方式进行布局和排版。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值