一、在元素后面添加元素清除浮动
- 添加空的标签来清除浮动:<div style="clear:both | left | right | none“></div>.出现位置要紧挨着浮动元素。缺点 带来多于标签
- 添加br标签来清除浮动:<br style="clear:left | right | all"> 出现位置要紧挨着浮动元素,缺点:带来多于的标签
- 使用伪类元素:after为在其元素后面,.clearfix:after{content:".",height:0;visibility:hidden;clear:both} .clearfix{zoom:1/*for <ie8*/},可能会有空隙
- 父元素使用overflow:hidden |auto;firefox 出现兼容问题,不建议使用
- 父元素使用display:table,
- 父元素一起浮动。
二、分析能解决的根本原因
BFC,它能包含其中的浮动元素,通过overflow,display触发了BFC。关于BFC 我做了篇笔记http://www.cnblogs.com/AliceX-J/p/5221951.html;display:table 没有直接触发BFC ,因为它创建的匿名框表,在这个框中又创建了table-cell这种BFC,间接触发了BFC.
clear的原理:在元素内部有浮动元素,清除浮动后,父元素的高度能能撑开。
时间: 2024-10-07 03:07:33