清除浮动的五种方法以及优缺点
方法 以及 清除 优缺点 五种 浮动
2023-09-14 09:13:49 时间
方法一:额外标签法
给谁清除浮动,就在其后额外添加一个空白标签 ,给其设置clear:both。
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化比较差。
clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来 。
css样式
#clear{
clear: both;
}
html代码
<div id="parent">
<div id="child"></div>
<!-- 方法一 额外标签法 -->
<div id="clear"></div>
</div>
方法二:父元素添加overflow:hidden
通过触发BFC方式,实现清除浮动
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。
css样式
#parent{
overflow: hidden;
}
方法三:使用after伪元素清除浮动
优点:符合闭合浮动思想,结构语义化正确。
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。
css样式
#parent:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
#parent{
/* 触发 hasLayout */
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
方法四:使用before和after双伪元素清除浮动
优点:代码更简洁
缺点:用zoom:1触发hasLayout.
css样式
#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
clear: both;
}
#parent{
*zoom: 1;
}
方法五:为父元素设置高度
缺点: 需要手动添加高度,如何后面的高度发生变化,还要再次修改高度,给后期的维护带来麻烦。
优点: 简单粗暴直接有效,清除了浮动带来的影响
相关文章
- ajax跨域问题以及解决方案_js跨域请求的三种方法
- 深入理解List的toArray()方法和toArray(T[] a)方法「建议收藏」
- OpenCV调用海康威视等摄像头(处理rtsp视频流)方法以及,出现内存溢出(error while decoding)或者高延迟问题解决[通俗易懂]
- JDK8辅助学习(四):Stream流 collect() 方法的详细使用介绍「建议收藏」
- etcd集群脑裂原因,以及处理方法
- 超详细解读Java接口:模块通信协议以及默认方法和静态方法
- JavaSE之Long 详解 Long的方法简介以及用法编程语言
- 组掌握Linux下修改文件夹用户组的方法(linux修改文件夹用户)
- of rangeMySQL处理超出范围值的方法(mysqlout)
- MySQL中文输入的技巧与方法(mysql输入中文)
- 作为phper既然了解共享内存函数shmop的使用方法,那么就必须要了解一下信号量是什么,以及信号量使用的代码案例详解编程语言
- 数Linux 下统计字符数的简便方法(linux统计字符)
- MySQL过程中创建临时表的方法(mysql过程临时表)
- recover恢复MySQL二进制数据:一种实用方法(mysql二进制数据)
- Linux查看发行版本的简单方法(linux查看发行版本)
- 函数解决Linux下调用Oracle函数的方法(linux调用oracle)
- Linux中当前目录大小的查看方法(linux当前目录大小)
- 运行检测Redis运行状态有效方法(如何查看redis正常)
- 过程Oracle中快速导出存储过程的方法(oracle中导出存储)
- 优势以Redis锁机制为突破口,实现优势更大的方法(redis锁机制的方法)
- MySQL安装时遇到卡死问题这里有解决方法(mysql一安装就卡死)
- Oracle 047错误代码解释及解决方法(oracle 047解释)
- mysql连接过多和死掉以及拒绝服务的解决方法
- 3步搞定纯真IP数据导入到MySQL的方法详解
- 在服务器中用IIS建立FTP服务器的图文方法
- android之计时器(Chronometer)的使用以及常用的方法
- javascript三种方法实现获得和设置以及移除元素属性
- 深入C#内存管理以及优化的方法详解
- Python去掉字符串中空格的方法
- 给Apache下的网站加速的方法总结
- jquery取子节点及当前节点属性值的方法