程序员经验分享-hwhale

CSS解决高度塌陷的几种方式

2023-05-16
浮动元素对兄弟元素的影响
当设置元素浮动时，会脱离文档流，飘在不设置浮动兄弟元素的上面，不占据底下的屏幕位置。注意文字是不会被浮动元素覆盖掉。
清除浮动的方式
两个元素同时设置浮动
clear:both; 清除浮动
overfow:hidden; 使用overflow与clear的效果一样，使用的使BFC原理
浮动对子父元素的影响
但子元素设置浮动时，父元素会产生高度塌陷，即父元素失去高度支撑。
解决高度塌陷的方法：
1.在设置了浮动得子元素得下方即父元素的里面设置一个空的div，给该div设置clear：both

在这里插入图片描述

2.使用伪元素方式，给父元素设置 类名::after{ content:"";display:block;clear:both; }

在这里插入图片描述

3.给父元素设置overflow:hidden；

在这里插入图片描述

字围现象
浮动的元素不可以遮挡文字，文字会从浮动元素的周围找到位置自动排列，这是因为文字具有自维现象
BFC 块级格式化上下文，(面试)
概念：可以理解一个元素的属性，当元素拥有这个属性，就可以拥有一个独立的渲染空间，它的布局不会影响容器外的布局
如何触发:
	1.是html根元素
	2.浮动元素(元素的float值不是none)
	3.绝对定位(元素的position为absolute或fixed)
	4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、
	table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
	5.overflow值不为visible的元素
作用
	1.避免外边距重叠
	2.清除浮动
	3.避免元素被浮动元素覆盖
	4.多列布局
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

解决高度塌陷的几种方式

CSS解决高度塌陷的几种方式 的相关文章

随机推荐

  • 议论文开头的引出原理

    相信大家都写过议论文 xff0c 议论文开头如果用大家普遍的描述去形容 xff0c 便是用温和的方式将观点进行引出 xff0c 但是此句话太过浅薄 xff0c 难以深入实质 原理 议论文的开头从本质上来说 xff0c 是大脑在看到题干所给的

  • 面试总结1

    总结 xff1a 面试不是以模板为驱动 xff0c 是以题目为驱动 与申论书写类似 xff0c 以模板为驱动 xff0c 只会削足适履 xff0c 让自己没有办法较好地发挥出来 xff0c 流畅性以及自身的创新性都没有办法较好地得到体现 以

  • 模式识别 一

    模式识别 教材选择模式识别基本概念模式识别的主要方法应用领域模式识别与机器学习的区别模式识别典型过程前修基础课程课后问题解答1 简述特征空间优化的方法2 简述分类器的设计准则3 简述分类器设计的基本方法4 简述在什么情况下分类器不可分5 分

  • Docker 持久化存储 Bind mounts

    Docker 持久化存储 Bind mounts Bind mounts 的 v 与 mount 区别启动容器基于bind mount挂载到容器中的非空目录只读 bind mountcompose 中使用 bind mount 官方文档 x

  • BGP路由技术详解（一）

    BGP路由技术详解 xff08 一 xff09 前言一 BGP路由协议概述1 BGP定义2 BGP的特点3 BGP分类4 BGP的路径矢量特征5 BGP的路由器6 BGP Peer 二 自治系统AS的概念1 定义2 AS号3 传输AS中的路

  • 计算机网络知识点（三） 数据链路层

    目录 第三章 数据链路层 3 1 数据链路层的设计问题 3 1 1 提供给网络层的服务 3 1 2 成帧 3 1 3 差错控制 3 1 4 流量控制 3 2 差错检测和纠正 3 2 1 纠错码 3 2 2 检错码 3 3 基本数据链路层协议

  • IP地址划分子网

    前言 记录的内容仅是本人在学习IP的路上的一些心得体会 IP组成 网络号 43 主机号 其实说到底就是一连串的二进制 地址分类 A类 xff1a 10 0 0 0 xff5e 10 255 255 255 B类 xff1a 172 16 0

  • 电脑网络（校园网/热点）持续连不上，连上后自动断联

    ipconfig flushdns xff1a 无效重启解决 xff1a

  • 工厂模式

    1 工厂方法 针对一个产品一个工厂 span class token keyword interface span span class token class name Moveable span span class token pun

  • 使用VSCode快速提交Gitee

    使用VSCode提交Gitee 前言下载GitGitee创建仓库使用VSCode克隆仓库到本地源代码管理界面说明保存账号密码 xff0c 不用每次提交输入 前言 每次用GitHub都要FQ xff0c 所以改用Gitee 下载Git Git

  • 配置webpack-dev-server自动化

    1 注意版本 xff0c 可能会有冲突 个人建议使用以下版本 xff0c 本人没有出现冲突 34 webpack 34 34 5 42 1 34 34 webpack cli 34 34 4 9 2 34 34 webpack dev se

  • Docker容器时间和服务器时间相差8小时

    项目场景 xff1a 在微服务部署时使用docker作为容器 xff0c 部署在服务器上时间不一致 问题描述 在服务器上使用docker进行项目部署时 xff0c docker容器时间和服务器时间相差8小时 xff0c 导致插入数据库时间不

  • anaconda中使用pip无法安装库到指定环境下的问题（已解决）

    参考文章 xff1a https blog 51cto com u 15060549 4662570 login 61 from csdn 大致意思就是通过修改site py文件中的 这段代码 xff0c 将这两个变量修改为环境自身的路径即

  • 使用Java实现HDFS文件读写

    1 HDFS读文件 2 HDFS写文件 3 实例操作 3 1新建Mawen工程 3 2在pom xml中将标签中内容替换为以下代码 xff0c 静待依赖包下载完毕 lt dependencies gt lt dependency gt lt

  • GD32F303移植FreeRTOS多任务调度只能执行一个任务解决办法

    1 问题描述 GD32F303移植完FreeRTOS后创建多个任务 xff0c 运行的时候只有一个任务在运行 xff0c 其余任务处于卡死不运行状态 xff0c void start task void pvParameters taskE

  • npm显示升级到最新版本仍然显示npm为原版本的问题解决

    文章目录 前言一 问题描述二 问题原因三 解决方法1 查看npm安装路径2 修改npm全局安装路径命令3 npm更新命令 总结 前言 在升级npm版本时遇到了显示版本升级成功 xff0c 但是在继续执行npm v命令查看npm版本时仍然显示

  • 教你做一个属于自己的平衡小车，用STM32F103单片机实现（代码篇）

    平衡小车软件篇 平衡小车硬件篇 目录 一 定时器相关代码 1 TIM2 2 TIM3和TIM4 二 中断相关代码 三 电机相关代码 四 OLED屏幕和MUP6050相关代码 五 PID函数 1 直立环 2 速度环 3 转向环 六 控制函数

  • MySQL报错Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column whic

    报错信息 报错信息及语句如下 span class token keyword SELECT span i span class token punctuation span sku id sku id span class token p

  • Ros2 Foxy：apt-get update过程中密钥问题

    本人在Ubuntu20 04中根据官方文档Foxy安装Rox2出现 The following signatures couldn t be verified because the public key is not available

  • CSS解决高度塌陷的几种方式

    浮动元素对兄弟元素的影响 当设置元素浮动时 xff0c 会脱离文档流 xff0c 飘在不设置浮动兄弟元素的上面 xff0c 不占据底下的屏幕位置 注意文字是不会被浮动元素覆盖掉 清除浮动的方式 两个元素同时设置浮动 clear both 清

热门标签