【前端面经】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;
}

以上就是浮动和清除浮动的方式。在实际开发中，我们需要根据具体的情况选择合适的方式，以实现预期的效果。