1. 三个关于浮动的概念
不浮动float:none;
清除周围的浮动元素 float:both 这是清除浮动的本意
清除子元素浮动对父元素的影响 clearfix 很多人都理解成这个叫清除浮动。。
立即学习“前端免费学习笔记（深入）”；
2. 什么是清除浮动
清除浮动不是把当前标签的浮动给清除了，如果这样，还加浮动做什么
其实清除浮动指的是清楚当前元素旁边的浮动元素，但是当前元素又不能影响别人，打不赢就跑，所以自己就跑到下面去了。
立即学习“前端免费学习笔记（深入）”；
3. 为什么要清楚浮动
在布局的时候我们经常希望某些内容能够水平排布，水平排布后，由于内部内容不确定，高度不能简单的给一个定值。而如果不给高度，子元素又都浮动了，父盒子就会因为没有子盒子的支撑而塌陷。
利用清除浮动的这个特性，我们可以给父元素中最后一个不浮动的盒子使用clear:both从而把父盒子的高度撑起来，并且能够根据内部内容的变化而改变高度。
立即学习“前端免费学习笔记（深入）”；
4. 清楚浮动的方法
4.1. 额外标签法
原理：单独使用一个标签加上clear:both跑到浮动元素下面，从而消除子盒子浮动造成的父盒子塌陷。
典型网站：京东
优点：通俗易懂，容易掌握
缺点：添加很多无意义的空标签，不符合结构与表现分离的原则，不利于后期维护
4.2. 父元素设置overflow：hidden
原理：让父盒子形成BFC，BFC的特性之一就是可以承载浮动元素
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
4.3. 单伪元素
.clearfix:after {<br /> content: "";<br /> height: 0;<br /> visibility: hidden;<br /> overflow: hidden;<br /> dispaly: block;<br /> clear: both;<br /> }<br />
.clearfix {<br /> zoom: 1;/*IE67*/<br /> }典型网站：新浪、网易
4.4 双伪元素
.clearfix简介
.clearfix:before, .clearfix:after {<br /> content: "";<br /> display: table;<br />
}/*在有该类的元素<strong>内部元素</strong>的前面和后面添加元素*/ .clearfix:after {<br /> clear: both;<br /> }/*只要after两侧有浮动元素，after就会跑到最下面，从而撑开带有该类名的父盒子*/<br /> .clearfix {<br /> *zoom: 1;<br /> } /*用于兼容IE/7/6*/用display:table是因为display:block有空隙
加了一个before是为了防止外边距合并
典型网站：小米、淘宝
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
615
收藏
