CSS float的使用和解决浮动带来的问题浮动是什么？官方对float的描述是：指定一个元素应沿其容器的左侧或右侧

float在css中经常用到，但是也会遇到许多问题。本文介绍float的特性，以及解决使用浮动时出现的元素遮盖和高度塌陷问题。

浮动是什么？

MDN对float的描述是：指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性。

更通俗理解是：没有浮动的情况下，网页中元素都在同一张纸上；设置浮动后，就多了一张透明的纸覆盖在上面，具有浮动的元素移动到第二张纸上排列。第一张纸上的元素会占据脱离元素的位置，但他的内容会环绕于浮动元素。

语法

float: none | left | right ;
none：默认值，不浮动
left：元素向左浮动
right：元素向右浮动

示例:

HTML:

/* 代码示例 */
<div class="container">
    <div class="left">left</div>
</div>
<div class="container">
    <div class="right">right</div>
</div>

CSS:

/* 代码示例 */
.left{
  float: left;
  background-color: blueviolet;
}

.right{
  float: right;
  background-color: yellow;
}

浮动的特点

浮动的元素会脱离标准文档流
浮动的元素会变成行内块级元素
浮动的元素只能左右移动，不能上下
浮动的元素之间不会重叠
浮动的元素碰到父元素的边框或者浮动元素边框就会停止

一、脱离标准文档流

设置浮动后，后面的元素会占据浮动元素的位置，导致浮动的元素会遮挡住后面的元素，但是内容不会被遮挡，如图片、文字。

示例:

HTML:

/* 代码示例 */
<div class="left">浮动盒子</div>
<p>这是一段不具有浮动属性的文本，这是一段不具有浮动属性的文本...</p>

CSS:

/* 代码示例 */
.left{
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;

  /* 浮动 */
  float: left;
  background-color: rgba(137, 43, 226, 0.8);
}

p{
    border: 5px solid red;
}

二、浮动的元素变成行内块，在一行显示

块级元素(如div)设置浮动，将不再独占一行，没指定宽度的情况由内容撑开。
行内元素(如span)设置浮动后，变为可设置宽度。

示例:

HTML:

/* 代码示例 */
<div class="block-box">
    <div class="left">div1</div>
    <div class="left">div2</div>
    <div class="left">div3</div>
</div>

<div class="inline-box">
    <span class="left">span1</span>
    <span class="left">span2</span>
    <span class="left">span3</span>
</div>

CSS:

/* 代码示例 */
.left{
    text-align: center;
    margin-left: 10px;
}
div.left{
  float: left;
  border: 3px solid rebeccapurple;
}
span.left{
    color: white;
    background-color: rebeccapurple;

    float: left;
    width: 100px; /* 行内元素可设置宽度 */
}

浮动带来的问题及解决方案

问题一：元素遮盖

解决方案：给受影响的元素添加clear属性

clear:left | right | both;
left: 清除左浮动；
right: 清除右浮动；
both: 清除两边浮动；

示例：

问题二：父元素高度塌陷

父元素在没有设置高度的情况下，子元素都为浮动元素时，父元素的高度为0。可通过清除浮动来解决这个问题。

示例:

HTML:

/* 代码示例 */
<div class="box">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>

<div class="float-box">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>

CSS:

/* 代码示例 */
.box{
    margin-top: 100px;
    border: 3px solid rebeccapurple;
}
.box > div{   
    height: 100px;
    margin-bottom: 10px;
    background-color: rgba(102, 51, 153, 0.2);
}

.float-box{
    margin-top: 100px;
    border: 3px solid rebeccapurple;
}
.float-box > div{
    width: 100px;
    height: 100px;
    background-color: rgba(102, 51, 153, 0.2);
    margin-right: 10px;

    float: left;
}