浮动的坑点与特性

最新推荐文章于 2021-06-17 10:49:22 发布
最新推荐文章于 2021-06-17 10:49:22 发布
阅读量134 收藏
点赞数 1
文章标签： 浮动的坑点与特性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dkasdasdasda/article/details/103225453
版权

#浮动的坑点与特性
##浮动的坑点：

  1. 浮动元素会脱离文档流
    在这里插入图片描述

  2. 父元素的高度不够会出错，产生高度塌陷
    在这里插入图片描述

##浮动的特性：

  1. 浮动元素能接触到浮动

在这里插入图片描述

  1. 浮动元素能接触到浮动
    在这里插入图片描述

  2. 浮动元素会格式化元素 讲任何元素转换成新的浮动元素
    在这里插入图片描述

  3. 浮动元素会把文本元素往当中挤
    在这里插入图片描述

code is my life
关注
浮动相关知识点笔记
weixin_46082115的博客
03-26 200
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法：选择器 { float: 属性值;为什么需要清除浮动？父级没高度。子盒子浮动了。影响下面布局了，我们就应该清除浮动了。
浮动的相关知识点
m0_59030524的博客
11-21 379
1. 浮动 1.1 传统网页布局的三种方式 网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。 CSS 提供了三种传统布局方式： 普通流（标准流/文档流） 浮动 定位 1.2普通流（标准流/文档流） 所谓的标准流，就是标签按照规定好的默认方式排列。 块级元素会独占一行，从上到下顺序排列 常用元素：div、hr、p、h1-h...
浮动和清浮动，内外边距和margin的坑
等，你的到来。
10-11 4255
浮动：使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。 可以往left，也可以往right 一般建议用ul.f>li.s编写，（ unorder list无序标签，需搭配li作为子标签）, 用div也可以，但是有些浮动效果做不到。 特性： 1.浮动的元素排在同一排 2.浮动的元素内容撑开高度 3.浮动的元素支持所有的CSS样式 4.浮动的元素脱离文档
浮动的特性
weixin_30315435的博客
09-20 519
一.浮动的特性 　　1.浮动的元素脱标 　　2.浮动的元素互相贴靠 　　3.浮动的元素由"字围"效果 　　4.收缩的效果 前提是标准文档流，margin的垂直方向会出现塌陷问题。 如果盒子居中：margin: 0 auto;如果盒子浮动了，margin: 0 auto;就不起任何作用 需求：让浮动的盒子居中 　　给浮动盒子，加一个父盒子，设置宽度跟浮动盒子...
vue 移动到图片浮动_Vue实现浮动按钮组件 – 页面滚动时自动隐藏 – 可拖拽
weixin_34929072的博客
01-30 726
效果图说明本文可能有点啰嗦了…组件难点如何监听滚动完成事件移动端如何监听拖拽事件前置条件为了充分发挥vue的特性，我们不应该通过ref来直接操作dom，而是应该通过修改数据项从而让vue自动更新dom。因此，我们这样编写template。{{text}}当然.ys-float-btn肯定是position:fixed的，其他的样式很简单，大家自由发挥。初始化位置首次进入页面时，按钮应该处于一个初始...
CSS3浮动定位
qq_43547376的博客
06-17 102
浮动的基本概念 浮动的最本质功能：用来实现并排 浮动使用要点：1.要浮动，并排的盒子都要设置浮动2.父盒子要有足够的宽度，否则子盒子会掉下去 float:left; 左浮动 1.2.3 float:right;右浮动3.2.1 浮动的顺序贴靠特性 子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找再前一个兄弟元素 浮动的元素一定能设置宽高 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。 使用浮动实现...
前端面试知识点目录一览
10-17
- 经验总结和问题解决：记录项目中遇到的问题（坑点）和性能优化的细节。 网络协议： - HTTP协议：了解请求/响应模型、状态码、HTTP方法等基础知识点。 - Cookie和Session：了解它们在身份验证和会话管理中的作用。...
自学前端第十七天:CSS浮动float定位
weixin_47592060的博客
05-04 1505
学习浮动(float) CSS的定位机制有3种：普通流（标准流）、浮动和定位。 1.标准文档流(normal flow) 这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。 前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局
揭秘MATLAB下载暗坑：避开常见错误，轻松获取
[揭秘MATLAB下载暗坑：避开常见错误，轻松获取](https://img-blog.csdnimg.cn/direct/7f05852d90bd4691a916deafb5ba5f8a.png) # 1. MATLAB下载概述 MATLAB是一种广泛应用于科学计算、工程仿真和数据分析的商业软件...
沈阳建筑大学在河南2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
贵州茅台数据(1).xlsx
09-16
贵州茅台数据(1)
cwgl_jy1301.doc
09-16
cwgl_jy1301.doc
java-ssm+jsp游戏账号交易系统实现源码(项目源码-说明文档)
09-16
登录进入游戏账号交易系统可以查看系统用户管理，用户信息管理，海洋新闻管理，海鲜信息管理，购买信息管理，订退单信息管理和系统管理首页、个人中心、卖家管理、用户管理、游戏类别管理、手续费用管理、地下城与勇士管理、地下城账号购买、地下城账号换绑管理、地下城账号申诉管理、地下城私信聊天管理、地下城私信回复管理、英雄联盟管理、英雄联盟购买管理 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
java-ssm+jsp医院资产管理系统实现源码(项目源码-说明文档)
09-16
登陆系统后，可以查看主页、个人中心、员工管理、供应商管理、设备类型管理、仪器设备管理、设备采购管理、设备入库管理、设备申请管理、检修信息管理等功能 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
一款基于fofa根据域名或fofa语法收集C段分布数量的工具_Ceyes.zip
最新发布
09-16
一款基于fofa根据域名或fofa语法收集C段分布数量的工具_Ceyes
intro-程序员问卷调查
09-16
程序员问卷调查 程序员问卷调查 程序员问卷调查 程序员问卷调查 程序员问卷调查
车型识别系统的系统GUI设计.zip
09-16
基于
CSS浮动特性详解：覆盖与环绕规则
本文将深入浅出地探讨CSS浮动的特性，以便更好地理解和应用。 首先，浮动的框支持左右方向的移动，其行为遵循以下原则： 1. **盖不住的文本**: 当一个元素被浮动（如`.item1`）时，它会向容器的边缘移动，但文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值