清除浮动(闭合浮动)的方法

                           

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

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

在程序媛的路上,越走越用劲儿:)
原文地址:https://www.cnblogs.com/AliceX-J/p/5222951.html