正文 1310字数 392,697阅读

不清除浮动会怎样？
（1）：背景不能显示
（2）：边框不能撑开
（3）：margin 设置值不能正确显示
（4）：下方内容往上移盖住浮动区域的内容

html代码：
<div class="container"> <div class="fl"></div> <div class="fr"></div> </div> <style> .fl{float:left;} .fr{float:right;} </style>
Run code
Cut to clipboard

    方式一：
    在.container下，最后再加一个div如下：
    <div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>
    Run code
    Cut to clipboard

      方式二：
      给父元素.container添加样式：
      .container{ overflow: auto; zoom: 1; }code
      Run code
      Cut to clipboard

        方式三：
        伪类清除浮动：after:
        .container:after{ content:''; display: block; clear: both; height:0; width:100%; visibility: hidden; } .container{ 　　zoom:1;//为了兼容IE }
        Run code
        Cut to clipboard

          方法四：
          双伪类清除浮动：
          .container:before,.container:after { content: ""; display: block; clear: both; } .container{ zoom: 1; }
          Run code
          Cut to clipboard

            方式五：
            展现为表格，需设置宽度：
            .container{ width:100%; display:table; }
            Run code
            Cut to clipboard

              方式六：
              展现为内联块状，需设置宽度：
              .container{ width:100%; display:inline-block; } code
              Run code
              Cut to clipboard

                方式七：
                超出隐藏，不推荐使用
                .container{ overflow:hidden; }code
                Run code
                Cut to clipboard

                  方式八：
                  给父元素定义高度，不推荐使用
                  .container{ height:50px; }code
                  Run code
                  Cut to clipboard