清除float副作用

浮动副作用

当元素设置 float 浮动后，该元素就会脱离文档流并向左 / 向右浮动 

    1、浮动元素会造成父元素高度塌陷

    2、续元素会受到影响

解决方案：

     1、父元素设置高度

      2、受影响的元素增加clear属性

      3、overflow清除浮动

      4、伪对象方式

详细：

1、父元素设置高度

  如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小。

2、受影响的元素增加clear属性

<div class="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="text"></div>
</div>

.container{
    width: 350px;
    height:500px;
    background-color:#888; }
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left; 
    margin: 5px; }
.text{
    width: 100px;
    height: 100px;
    background-color: red;
    clear:both; }

   另：如果 text 在 container 外，则无需设置，父元素设置高度、overflow清除浮动、伪对象的方式都会默认撑开元素。

3、overflow清除浮动

  如果父级塌陷，并且同级元素也受到了影响，可以使用overflow清除浮动。此时，父级不设置高度，在父级标签里加：overflow:hidden; clear: both;

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div> 
<div class="nav"></div>

.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both; }
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left; 
    margin: 5px; }
.nav{
    width: 100px;
    height: 100px;
    background-color: red; }

  另：如果 nav 在 container 内，则给nav设置 clear属性就可以解决。

4、伪对象方式

  如果父级塌陷，并且同级元素也受到了影响，可以使用伪对象的方式。为父级添加伪类after,设置空的内容display:block;，并且使用clear：both;此时，父级不能设置高度。

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div> 
<div class="nav"></div>

.container {
    width: 350px;
    border: 1px solid red; }
.container::after {
    content: "";
    display: block;
    clear: both; }
.box {
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px; }
.nav {
    width: 100px;
    height: 100px;
    background-color: red; }

  另：如果 nav 在 container 内，则给nav设置 clear属性就可以解决。

伪对象：

概念：就是给元素追加一个虚拟标签，由css加载，可以节省html的资源开销，必须有content属性，默认是行元素，可以进行转换。

::after:在指定的标签后面添加一个对象

::before:在指定的标签前面添加一个对象

content：元素里面的内容（内容中不能写标签）