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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:从浏览器地址栏输入框内输入url 到页面渲染的过程
下一篇:CSS布局之float + 负margin的使用

发表评论

最新留言

不错!
[***.144.177.141]2024年03月09日 22时25分50秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

三星k3梅林没有软件中心_10万出头买顶配,1.4T合资家轿起亚K3换新,还带换挡拨片... 2019-04-21
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 where从句_《快速念咒——MySQL自学入门指南》:第1章第8节:模糊查询LIKE——一窝兔子(上)... 2019-04-21
mysql 重置密码_mysql忘记密码如何重置密码,以及修改root密码的三种方法 2019-04-21
python-docx tables后追加内容_Mac brew安装MySQL8.0.21后忘记密码(重置密码篇) 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
c语言case中途跳出,break语句在switch结构语句中的作用是终止某个case,并跳出switch结构语句。... 2019-04-21