关于清除浮动与闭合浮动

Posted 2020-08-20

　　　在给html添加样式的构成中，css是必不可少的的，然而css中有一些功能的实现可以通过不同的方法实现，通过效果查看好像并没有什么不同，那它们之间到底有什么本质区别呢，又有哪些概念被我们无意的忽略或者无视了呢，突然想总结总结这一类的问题，本篇日志是本人对于“清除浮动”的一些想法，欢迎看到此篇朋友们加以改正指导。

　　　

 为什么要清楚浮动

在布局的时候我们经常希望某些内容能够水平排布，水平排布后，由于内部内容不确定，高度不能简单的给一个定值。而如果不给高度，子元素又都浮动了，父盒子就会因为没有子盒子的支撑而塌陷。

1. 清除浮动的方法

其实在根本上来说，清除浮动主要有二个方法： 清除周围的浮动元素（闭合浮动）， 清除子元素浮动对父元素的影响（清除浮动）。

但这两种方法可以用不同的方法实现，那我想简单介绍一下他们的利弊。

 

1.1.1. 额外标签法

原理：单独使用一个标签加上clear:both跑到浮动元素下面，从而消除子盒子浮动造成的父盒子塌陷。

典型网站：京东

优点：通俗易懂，容易掌握

缺点：添加很多无意义的空标签，不符合结构与表现分离的原则，不利于后期维护

1.1.2. 父元素设置overflow：hidden

原理：让父盒子形成BFC，BFC的特性之一就是可以承载浮动元素

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

 

1.1.3. 单伪元素

.clearfix:after {
    content: "";
    height: 0;
    visibility: hidden;
    overflow: hidden;
    dispaly: block;/*不是inline就行*/
    clear: both;
}
.clearfix {
    *zoom: 1;/*IE67*/
}

 

 

1.1.4. 双伪元素

.clearfix:before, .clearfix:after {
    content: "";
    display: table;/*不是inline就行*/
}/*在有该类的元素内部元素的前面和后面添加元素*/

.clearfix:after {
    clear: both;
}/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/

.clearfix {
    *zoom: 1;
} /*用于兼容IE/7/6*/

 

 用display:table是因为display:block伪元素仍然有宽度

加了一个before是为了防止外边距合并。