清除浮动（闭合浮动）的方法

Posted 2020-06-17

                           

一、在元素后面添加元素清除浮动

• 添加空的标签来清除浮动：<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的原理：在元素内部有浮动元素，清除浮动后，父元素的高度能能撑开。