CSS中的清除浮动全总结
来源:互联网 发布:论文写作的意义 知乎 编辑:程序博客网 时间:2024/06/05 18:57
清除浮动
清除浮动是指清除浮动所造成的影响。
清除浮动方法:
目前最主流的方法:clearfix
.clearfix:after{ content:""; display:block; clear:both;}.clearfix{ *zoom:1; /*兼容IE6,触发IE6中的hasLayout属性,达到BFC类似作用*/}
overflow:hidden;或overflow:auto;
父容器会形成BFC。.clear{ overflow: hidden;}
目前也有不少开发者使用这种方法。
缺点:不适用于像下拉菜单等内部子元素有定位且超出容器的情况添加空标签并设置样式clear:both;
.clearfix{ clear: both}
优点:简洁,浏览器兼容性好
缺点:标签无语义,不提倡!给浮动元素的父容器添加浮动
父容器也添加浮动之后,可以清除内部的浮动,但是会影响整体布局。
缺点:拆东墙补西墙的做法,不提倡浮动元素后面的元素添加clear属性
浮动元素什么都不做,给浮动元素后面的元素添加clear属性。
缺点:高度塌陷的问题还没有解决,没有解决问题的根本——闭合浮动,所以不提倡此方法
总结,目前来看第一种方法是最佳的选择,也是我开发中一直用的方法,不过未来的趋势是流行了这么多年的“浮动+定位”布局会渐渐被“flexbox+grid”布局取代,一起迎接并见证吧!
本文首发在个人博客yoowin.me,欢迎访问。
阅读全文
0 0
- CSS中的清除浮动全总结
- css清除浮动总结
- CSS清除浮动总结
- CSS清除浮动总结
- css中的浮动清除
- 【css实践】清除浮动总结
- CSS清除浮动方法总结
- css清除浮动float总结
- CSS中的浮动与清除
- css中的浮动以及如何清除浮动
- CSS-浮动&清除浮动
- [css] 清除浮动的方式总结
- css 清除元素的浮动方法总结
- 初步了解css中的 浮动和浮动清除的原理
- CSS浮动和清除浮动
- css浮动与清除浮动
- css清除浮动/闭合浮动
- css闭合浮动、清除浮动
- 配置SQLServer服务器远程连接
- shell 第一次给了脚本
- 今日头条StreamTook和配置
- 机器学习:支持向量机(SVM)与Python实现第(四)篇
- spark学习笔记:使用API初始化SparkContext
- CSS中的清除浮动全总结
- Android 多进程对Application影响
- 回忆那时年轻的作品--模拟操作系统
- iOS 用其他应用程序打开文件功能如何实现的iOS开发
- Appium native hybrid webview混合操作及元素定位(14)
- Maximum repetition substring POJ
- 非线性SVM与核函数
- Python多线程--(3)同步
- spring注解 -----最简单的注解与自动装配例子