【前端面经】CSS-浮动和清除浮动的方式
浮动和清除浮动的方式
在页面布局中，我们经常会用到浮动来实现一些特殊效果，但是浮动也会引起一些问题。在使用浮动布局时，我们需要清除浮动以避免出现布局问题。本文将介绍浮动的相关知识以及清除浮动的方式。
浮动
浮动是 CSS 中的一种布局方式。当一个元素浮动时，它会脱离文档流，不再占据文档空间。浮动元素的位置会受到其他元素的影响，有时会出现“高度塌陷”的现象。
浮动的定义
非 IE 浏览器下，父容器不设高度且子元素浮动时，容器高度不会被内容撑开。因此，内容会溢出到容器外面而影响布局，这种现象被称为浮动（溢出）。
浮动的工作原理
- 浮动元素脱离文档流，不占据空间（引起"高度塌陷"现象）。
- 浮动元素碰到父元素的边框或者其他浮动元素的边框时停留。
浮动元素引起的问题
- 父元素的高度无法被撑开，影响与父元素同级的元素。
- 与浮动元素同级的非浮动元素。
- 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的结构。
清除浮动的方式
在使用浮动布局时，我们需要清除浮动以避免出现布局问题。下面是几种清除浮动的方式：
1. 给父级元素添加 height 元素
可以给父级元素添加 height 属性，使其高度可以被撑开，从而解决浮动元素引起的高度塌陷问题。但是这种方式只适用于浮动元素的高度已知的情况。
2. 在最后一个浮动元素后添加一个空的 div，并添加 clear: both 样式
在最后一个浮动元素后添加一个空的 div，再设置 clear: both 样式，可以清除浮动。这种方式适用于浮动元素的高度未知的情况。
<div style="clear:both;"></div>
3. 给包含浮动元素的父级元素添加 overflow: hidden 样式
给包含浮动元素的父级元素添加 overflow: hidden 样式，可以清除浮动。这种方式适用于父级元素没有设置高度的情况。
<div style="overflow: hidden;">
<div style="float: left;">浮动元素1</div>
<div style="float: left;">浮动元素2</div>
<div style="float: left;">浮动元素3</div>
</div>
4. 使用 ::after 伪元素，添加 display: block，clear: both 样式
使用 ::after 伪元素可以在元素的末尾插入一个虚拟的元素。给这个虚拟的元素添加 display: block，clear: both 样式，可以清除浮动。
.clearfix::after {
content: "";
display: block;
clear: both;
}
以上就是浮动和清除浮动的方式。在实际开发中，我们需要根据具体的情况选择合适的方式，以实现预期的效果。