CSS拾遗篇之浮动元素の影响
发布日期:2022-02-22 16:04:48
浏览次数:35
分类:技术文章
本文共 668 字,大约阅读时间需要 2 分钟。
前置知识
- 图片(未浮动)默认会与上方最后一行文字基线对齐
- 图片(未浮动)默认会与下方第一行文字基线对齐
补充:正是由于基线对齐,所以图片下方会出现空隙!
浮动规则
浮动元素对其上方元素的影响
浮动元素对行内文本的影响:
- 图片或块级元素设置float:left;之后,向左浮动,直到外边缘碰到包含它的框或者另外一个浮动元素的边框为止。
- 浮动之后变为块级元素,vertical-align属性失效
浮动元素对其他元素的影响:vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。只对行内元素、表格单元格元素生效,不能用它垂直对齐块级元素。
- 浮动元素不能比前一个块级元素或浮动元素高。
- 尽可能高的前提下,尽可能靠左/右
- 当上一行剩余宽度不足时,float元素会显示在下一行
浮动元素对其下方元素的影响
浮动元素与块级元素重叠:
- 边框、背景 会显示在浮动元素之下;
- 文本内容环绕浮动元素;
- 边框、背景、内容都环绕浮动元素
整体来看,浮动元素对布局的影响
- 图片浮动后与上方最后一行文字对齐,下方文字环绕图片
- 浮动元素不能比前一个块级元素或浮动元素高。
- 浮动元素会与下方块级元素重叠
图片下方的空隙是由图片右下角那一行文字撑开的
总结
- 浮动元素不能比前一个块级元素或浮动元素高。
- 尽可能高的前提下,尽可能靠左/右
- 当上一行剩余宽度不足时,float元素会显示在下一行
- 元素浮动后仍然会与上方文字最后一行对齐(由于上方宽度不足);下方文字将环绕其排列
学识浅薄,还请各位老大多多指教!
转载地址:https://blog.csdn.net/Conradine_Lian/article/details/108061586 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年03月09日 22时25分50秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
k8s边缘节点_边缘计算容器及K8S应用的三种场景及部署选项
2019-04-21
诸葛io的技术架构图_基于泳道技术生成“无数”个测试环境
2019-04-21
互相引用 spring_# 技术笔记:spring、springBoot源码解析
2019-04-21
华为发布岳云鹏手机_鸿蒙2.0正式发布:明年华为手机全面升级
2019-04-21
ifpc挖filecoin_Filecoin挖矿分析全套 不容错过的干货
2019-04-21
python扫雷 高级算法_Python玩转算法—扫雷
2019-04-21
牛客网python测试考试答案_牛客网SQL题库之考试分数
2019-04-21
git获取所有branch_使用jGit 通过gitUrl 获取Git的所有分支
2019-04-21
mysql like 数字结尾_重拾MySQL之正则表达式
2019-04-21
mysql 重置密码_mysql忘记密码如何重置密码,以及修改root密码的三种方法
2019-04-21
python中两个时间相减结果转为小时_Python起步(二)基础数据类型1
2019-04-21
定义泛化。举个例子_网易考拉应用的dubbo泛化调用,是如何实现的?
2019-04-21
mysql里可以用cube吗_sql server的cube操作符使用详解_mysql
2019-04-21
php mysql 图书_使用PHP+MySQL来对图书管理系统进行构建
2019-04-21
单片机c语言 int1,51单片机into、int1中断计数c语言源程序.doc
2019-04-21
c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc
2019-04-21