CSS浮动

CSS浮动可以用来控制页面上内容的定位和布局，使其向左或向右浮动。当一个元素设置了浮动之后，它会脱离正常的文档流，相应地，浮动也会给周围元素带来影响，所以我们有些时候也需要清除浮动带来的影响。

浮动属性的值有：

float：none //默认
float：left; //左浮动
float：right; //右浮动
float：inherit;  //继承

1.文字环绕图片

浮动最初的设计是为了用于实现文字环绕图片的效果。例如：

<div class="logo">
    <img src="./po.jpg" alt="" />
</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sint
    suscipit deleniti placeat cupiditate voluptatibus distinctio voluptatum
    doloribus, debitis aperiam sapiente dolorum odio doloremque fuga nam ipsum
    itaque sit ducimus.
</p>

.logo{
    float: left;
    margin-right: 20px; 
}

2.浮动的影响

浮动会使父元素的高度塌陷

 <div class="father">
    <div class="child"></div>
 </div>

.father {
  width: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid rgb(64, 99, 32);
}

效果图：

当子元素添加float:left后，此时父元素的高度塌陷了。如图所示：

3.清除浮动常见方法

1. 在最后一个浮动标签后，新加一个标签，给其设置clear:both;例如:

  <div class="father">
    <div class="child"></div>
    <div style="clear:both"></div>
  </div>

缺点：会产生大量空元素，十分浪费资源。

2. 给父元素设置固定高度来实现清除浮动

.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

缺点：不够灵活，后期不好维护。

3. 使用after伪元素清除浮动

 <div class="father clearfix">
   <div class="child"></div>
 </div>

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

优点：更加灵活，可重用，不用设置额外的空元素。

4. 父元素添加overflow属性

.father {
  width: 200px;
  border: 1px solid red;
  overflow: hidden;
}

优点：简单，但是注意使用的时候要确保对页面内容没有产生影响。

一般来说，子元素在设置浮动后，父元素要清除浮动，推荐使用伪元素来清除浮动。当父元素设置了绝对定位后，不需要清除浮动。
另外，浮动不止会使得父元素高度发生塌陷，当浮动带来其他的影响时，也需要考虑清除浮动