web清除浮动方法

Web期末笔记：清除浮动方法

一、浮动带来的问题

子元素设置float:left后脱离标准流，父盒子高度塌陷，背景、边框无法正常显示，需要清除浮动。

二、四种常用清除浮动方法（考试重点）

方法1：给父元素设置 overflow: hidden（最简单，推荐）
.father {
overflow: hidden;
}
优点：代码少，书写方便
缺点：超出容器的内容会被隐藏

方法2：额外空div清除浮动（传统写法）

1. HTML末尾添加空div

2. CSS设置 .clear { clear: both; } 优点：无副作用，不会隐藏内容 缺点：增加多余无意义标签，代码冗余

方法3：伪类清除浮动（企业开发标准，最优）

给父类添加clearfix类，通过:after伪元素清除浮动
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容低版本IE */
.clearfix {
zoom: 1;
}
使用：父盒子加class="clearfix"

优点：不增加多余标签，不遮挡内容，项目通用

方法4：父盒子设置高度（治标不治本）

直接给父盒子写固定高度，撑开容器。
.father {
height: 200px;
}
缺点：内容高度变化时会失效，仅固定高度页面临时使用

三、简答背诵考点

1. clear: both作用：清除左右两侧浮动带来的高度塌陷。

2. 项目开发首选清除浮动方式：伪类clearfix方法。

3. overflow:hidden清除浮动的弊端：容器内溢出元素会被裁剪隐藏。