详细理清浮动与清除浮动的几种方式

一、浮动产生原因
浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题。
二、浮动产生负作用
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
三、css解决浮动，清除浮动方法
以这个左右布局为例：

return (
    <div className="App">
      <div className='Header'></div>
      <div className='main'>
        <div className='leftSidebar'></div>
        <div className='rightSidebar'>
        <ul>
          <li style={bgcolor[0]}></li>
          <li style={bgcolor[1]}></li>
          <li style={bgcolor[2]}></li>
          <li style={bgcolor[3]}></li>
          <li style={bgcolor[4]}></li>
          <li style={bgcolor[5]}></li>
        </ul>
        </div>
      </div>
    </div>
  );

页面效果：

我们可以看到高度只有60px；这是由于右边彩虹块浮动的原因
方法一：添加新的元素 、应用 clear：both；
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

 return (
    <div className="App">
      <div className='Header'></div>
      <div className='main'>
        <div className='leftSidebar'></div>
        <div className='rightSidebar'>
        <ul>
          <li style={bgcolor[0]}></li>
          <li style={bgcolor[1]}></li>
          <li style={bgcolor[2]}></li>
          <li style={bgcolor[3]}></li>
          <li style={bgcolor[4]}></li>
          <li style={bgcolor[5]}></li>
        </ul>
        </div>
      <div className="clearfloat"></div>
      </div>
    </div>
  );

.clearfloat{
  clear: both;
}

方法二:父级div定义 overflow: auto（注意：是父级div也就是这里的 main）

.main{
  overflow: auto;
}

方法三： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

.clearfix:after{
    content:"";/*设置内容为空*/
    height:0;/*高度为0*/
    line-height:0;/*行高为0*/
    display:block;/*将文本转为块级元素*/
    visibility:hidden;/*将元素隐藏*/
    clear:both;/*清除浮动*/
}

方法四:使用双伪元素清除浮动

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

我们来看看使用之后的效果

可以明显看到已经有了高度。