解决浮动的影响
时间:2021-07-17
本文章向大家介绍解决浮动的影响,主要包括解决浮动的影响使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
浮动会产生的影响:
高度塌陷:
如果父亲没有固定的高度,子元素会添加浮动,后面元素上去补位置,父元素会高度变低
解决方式:
- 给父元素一个固定的高度
缺点:父元素是固定高度时,如果元素过多,会产生溢出
- 清除浮动,不让补位元素进行补位
缺点:如果父元素里面只有一个子元素,没有补位元素,则需要给部位元素后面添加
一个元素,应用清除浮动,但是这个元素类型必须是块元素一般使用div
- 给父元素添加
overflow:hidden;
除了溢出隐藏外,还会触发BFC块级元素上下文,形成一个独立的区域,不受到外界的干扰,也不会把内部元素影响到外部,同时还能让浮动的元素参与高度的计算用于解决高度塌陷。
缺点:会隐藏溢出元素
优点:简单、代码简洁
- 万能清除法
父级添加after伪元素
父级添加双伪元素
越努力,越幸运
原文地址:https://www.cnblogs.com/Dqarden/p/15024053.html
- C#使用RSA证书文件加密和解密示例
- Python调用C函数的方法以及如何编写Python的C扩展
- C# 中使用 RSA加解密算法
- Tensorflow实践:用神经网络训练分类器
- 理解闭包 js回收机制
- java 解析 XML实例
- Java 线程内异常处理
- Raphael path 拖动实现
- 黑猿大叔-译文 | TensorFlow实现Batch Normalization
- Java后端WebSocket的Tomcat实现
- jwplayer 隐藏属性方法记载
- TensorFlow从0到1丨开篇:Hello TensorFlow !
- JS原型继承和类式继承
- 在Servlet的init方法中创建线程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决git/github下载速度缓慢的问题总汇------转
- C语言程序框架注释的一种模板
- Kryo 入门指南
- C# 通过T4自动生成代码
- Netty 主从多线程
- 斐波那契数组-递归和循环实现
- KMP算法 C#实现 字符串查找简单实现
- elasticsearch压力测试工具之ESrally使用说明
- BitMap算法 .net实现 用于去重并且排序,适用于大型权限管理 ,大数据去重排序
- 5.FFMPEG-Qt移植ffmpeg、ffmpeg结构体介绍
- winform总结6=>线程和委托的关系
- winform总结3> 有趣的bat/winform程序完成自己的任务,然后把自己删除
- winform总结2> Action<> ,Action,func<>,委托相关的理解
- winform开发 总结1>winform程序使用线程的必要性,以及正确的使用方式
- Winform 后台将指定的控件集合添加到制定容器中