CSS 浮动之微妙与四种清除浮动的方式

在CSS中，跳出标准文档流有浮动、绝对定位和固定定位这三种方法。这种脱离文档流的排版方式赋予了网页设计更多的布局可能性。在这三种脱离文档流的方式中，浮动应用最广，可为元素设置自定义位置，实现更加灵活的网页布局。

浮动（Float）

浮动允许元素脱离文档流的正常流向，通过设置 float属性的值（left或right），元素会沿着该方向移动并与其他元素重叠。浮动元素不会占据原先的位置，其后的内容会流到浮动元素旁边。

浮动元素的特性

浮动元素脱离文档流，不会占据原先的位置，在内容发生变化或其他元素调整时，也不会对浮动元素造成影响。
浮动元素与其他元素重叠，使得浮动元素可以在其他元素之上或之下。
浮动元素可用于创建灵活的网页布局，如两栏布局、三栏布局或更复杂的布局。
浮动元素会对其他元素产生影响，如文本会环绕浮动元素，浮动元素可能会遮挡其他元素。
清除浮动

当浮动元素对网页布局造成影响时，我们可以通过以下四种方法清除浮动：

创建新BFC（Block Formatting Context）

BFC是一个隔离容器，其中的元素不会受到外部元素的影响。我们可以使用以下方法创建BFC：

overflow: hidden
float: left/right
display: inline-block
position: absolute/fixed
创建BFC后，浮动元素的影响会被限制在BFC内，不会影响BFC外的元素。

设置 overflow 属性

overflow属性可以设置元素内容溢出的处理方式，当元素的内容超过元素的边框时，我们可以使用 overflow: hidden 来隐藏溢出内容。这将防止浮动元素对其他元素造成影响。

使用 display 属性

display 属性可以设置元素的显示方式，我们可以使用 display: inline-block 来将元素设置为内联块元素。内联块元素既具有块元素的特性，又具有内联元素的特性，它不会对其他元素造成影响。

使用伪元素

伪元素是虚拟的元素，我们可以使用伪元素来清除浮动。伪元素 :after 和 :before 可以用来在元素之前或之后插入内容。我们可以使用以下CSS代码来清除浮动：

.clearfix:after {
content: "";
display: block;
clear: both;
}

.clearfix {
*zoom: 1;
}

在元素上添加 clearfix 类，浮动元素的影响就会被清除。

总结

浮动是一种脱离文档流的排版方式，它允许元素沿着指定的方向移动并与其他元素重叠。浮动元素不会占据原先的位置，其后的内容会流到浮动元素旁边。浮动元素可用于创建灵活的网页布局，如两栏布局、三栏布局或更复杂的布局。浮动元素会对其他元素产生影响，如文本会环绕浮动元素，浮动元素可能会遮挡其他元素。我们可以通过创建新BFC、设置 overflow 属性、使用 display 属性和伪元素来清除浮动。