CSS中的浮动是一种布局方式，可以使元素“脱离文档流”并沿着其父容器的左侧或右侧浮动。常用于实现多列布局或图文混排等效果。

浅谈CSS中浮动和清除浮动带来的影响

什么是浮动？

CSS中的浮动是一种布局方式，可以使元素“脱离文档流”并沿着其父容器的左侧或右侧浮动。常用于实现多列布局或图文混排等效果。

浮动带来的影响

1. 高度塌陷

浮动元素不参与正常布局，其所在的容器无法计算其高度，因此会发生高度塌陷。实际效果是父容器比实际内容区域更小，影响页面的美观度和排版效果。例如：

<div class="parent">
  <div class="child" style="float: left;">左浮动子元素</div>
  <div class="child" style="float: left;">右浮动子元素</div>
</div>

上述代码中，左右两个子元素都使用了浮动布局，但是父元素的高度没有随之改变，导致其下方的内容“萎靡不振”。

2. 元素重叠

使用浮动布局时，如果没有明确指定宽度或使用了百分比宽度，那么元素的宽度可能无法确定。在这种情况下，浮动元素可能会相互重叠，导致排版混乱。例如：

<div class="parent">
  <div class="child" style="float: left; width: 50%;">左浮动子元素</div>
  <div class="child" style="float: left;">右浮动子元素</div>
</div>

在这个例子中，左浮动子元素占据了父元素宽度的50%，右浮动子元素宽度则没有设置。这样会导致右浮动子元素的大小无法确定，可能会与左浮动子元素重叠。

清除浮动

为了解决上述问题，我们需要使用清除浮动技术。清除浮动是一种让浮动父元素正确计算高度的方法，可以避免高度塌陷的问题。目前常用的清除浮动方法有以下几种：

1. 使用clear属性

可以给父元素增加一个空的div元素，并使用clear属性清除浮动。例如：

<div class="parent">
  <div class="child" style="float: left;">左浮动子元素</div>
  <div class="child" style="float: left;">右浮动子元素</div>
  <div style="clear: both;"></div>
</div>

上述代码中，在父元素的末尾添加了一个空元素，并使用clear: both;清除浮动。

2. 使用overflow属性

可以给父元素增加overflow属性，设置为auto或hidden，这样可以让父元素自动计算高度，并避免高度塌陷问题。例如：

<div class="parent" style="overflow: hidden;">
  <div class="child" style="float: left;">左浮动子元素</div>
  <div class="child" style="float: left;">右浮动子元素</div>
</div>

上述代码中，我们将overflow属性设置为hidden，从而让父元素自动计算高度。