清除浮动(clear float)
来源:互联网 发布:复杂网络基本概念 编辑:程序博客网 时间:2024/05/16 19:44
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。如上一篇中讲到的所有元素左浮动时,元素塌陷即父元素高度为0px;
清除浮动前:
方法一:使用带clear属性的空元素清除
<style> .clear{ clear: both; } </style> <body> <div style="border: solid 5px #09F; width:300px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div> <div class="clear"></div> </div> </body>
清除浮动后:
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性
给未浮动的父元素设置 overflow: auto;或 overflow: hidden;属性。另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
<div style="border: solid 5px #09F; width:300px; overflow: auto;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div></div>
方法三:给浮动的元素的容器添加浮动
<div style="border: solid 5px #09F; width:300px; float:left;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div></div>
缺点:给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用,当父元素是body时设置无效。
方法四:使用CSS的:after伪元素
结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
<style> .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; /*兼容IE6 IE7*/ }</style><body> <div class="clearfix" style="border: solid 5px #09F; width:300px; "> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div> </div> </body>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格”020”或点”.”,并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
方法四:使用邻接元素处理
给浮动元素后面的元素添加clear属性,此元素与浮动元素是同一级的元素。
清除前:
<div style="border: solid 5px #09F; width:500px; "> <div style="height: 100px; width: 100px; background-color: Red; float:left;"></div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"></div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"></div> <div style="clear: both; background: #800080;">同级元素</div></div>
清除后:
- 清除浮动(clear float)
- 清除浮动(Clear Float)
- css清除浮动 clear float
- 浮动和清除浮动 float clear
- css Clear:both 清除float浮动
- H5 之清除浮动 clear:float
- HTML5中的浮动(float)与清除浮动(clear)
- CSS 浮动(float:left),清除浮动(clear:both)
- 浮动(float)与清除浮动(clear)
- float 浮动 《1》clear:both清除浮动 ;《2》设置父元素overflow:hidden来清除浮动
- 用float clear和BFC清除浮动 学习总结
- 清除浮动都有哪些方法 clear float
- CSS浮动(float,clear)
- CSS浮动(float,clear)
- css浮动(float,clear)
- 浮动float与clear
- css clear 清除浮动
- 清除浮动clear样式
- 地理编码和反地理编码
- DP--最长上升子序列
- mysql性能优化
- hadoop(2.x)以hadoop2.2为例完全分布式最新高可靠安装文档
- LeetCode17:Letter Combinations of a Phone Number
- 清除浮动(clear float)
- 在指定的 DSN 中,ODBC驱动程序和应用程序之间的体系结构不匹配解决方法
- Ubuntu 14.04.1中安装JDK
- 数据结构实践项目——图的基本运算及遍历操作
- 面试问题
- 【Oracle】--"任性"Oracle安装之旅
- 【C#】流控制
- WebService
- 容器Collection_Set_List_ArrayListJAVA099-102