前端基础：CSS清除浮动的原因、本质和方法

目录

1. 清除浮动的原因

2.  清除浮动的本质

3.  语法

4.  清除浮动的方法

4.1  额外标签法（隔墙法）

4.2  父级添加overflow属性（重点）

4.3 父级添加after属性（重点）

4.4  父级添加双伪元素（重点）

5.  清除浮动总结

5.1 三原因

5.2  四方法

---

1. 清除浮动的原因

1. 网页是高度是无限的（比如淘宝的页面是有无数的产品可以浏览的），要达到父级元素的高度要由子元素撑开的效果，这就要清除浮动。
2. 子级元素是浮动的
3. 浮动元素是不占位置，会影响后面元素的排版。

2.  清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响。

• 如果父级元素本身有高度，则不需要清除浮动。
• 清除浮动后，父级元素会根据浮动的子盒子自动监测高度。父级有高度则不会影响后面的标准流。

3.  语法

选择器： {clear：属性值；}

属性值	描述
left	清除左侧浮动
right	清除右侧浮动
both	同时清除左右侧浮

注：在实际开发中，用clear：both比较经常。

清除浮动的策略是：闭合浮动。

4.  清除浮动的方法

4.1  额外标签法（隔墙法）

这是W3C推荐方法，就是在浮动元素末尾添加一个空标签。

如<div style=" clear: both"></div>或者</br>

• 优点：通俗易懂，书写简单
• 缺点：增加无意义标签，结构差
• 注意：空标签必须是块级元素！

        实际工作中会遇到，但是不常用。

4.2  父级添加overflow属性（重点）

语法：选择器：{ overflow:  hidden; }

属性值	描述
hidden	内容会被修剪，并且其余内容是不可见的。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

• 优点：代码简洁
• 缺点：无法显示溢出的部分

4.3 父级添加after属性（重点）

after伪元素法是额外标签法的升级版，给父级元素添加：（后面会详细讲解哦）

.claearfix:after {

        conten: "";

        display: block;

        height: 0;

        clear: both;

        visibility: hidden;

}

.clearfix {

        *zoom: 1;

}

• 优点：无标签增加，结构清晰
• 缺点：照顾低版本浏览器，IE6-7,不兼容
• 代表网站：百度，淘宝，网易

4.4  父级添加双伪元素（重点）

   .claearfix:before,.claearfix:after {

            content: "";

            display: table;

        }

        .claearfix:after {

            clear: both;

        }

        .clearfix {

            *zoom: 1;

        }

• 优点：代码更简洁
• 缺点：照顾低版本浏览器，IE6-7,不兼容
• 代表网站：小米、腾讯

5.  清除浮动总结

5.1 三原因

1. 父级没高度
2. 子盒子浮动
3. 影响后面布局

5.2  四方法

方式	优点	缺点
额外标签法	简单，易懂	添加无意义标签，结构差
父级overf:hiden	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	IE6-7浏览器不兼容
父级双伪元素	结构语义化正确	IE6-7浏览器不兼容