我所知道的CSS清除浮動四種方法

CSS清除浮動

不清除浮動會怎麼樣？

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS:

.container{
        width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: #ffff00;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: #fa0000;
        float: right;
    }

效果：

子元素div並無撐開父容器，這就是咱們要清除浮動的緣由。

---

解決方法：

• 在浮動元素後面添加 class 爲 clear 的 空 div 元素，給這個 div 設置樣式 .clear{clear:both;}

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>

CSS:

.clear{
      clear:both;
   }

效果：

---

• 給父容器添加 overflow:hidden 或者 auto 樣式

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS:

.container{
         width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
        overflow:hidden; /*或者auto */
        zoom:1;   /*IE6*/
    }

效果：

---

• 給父容器添加 clearfix 的 class ，用 僞元素 clearfix：after 來設置樣式，清除浮動

HTML:

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS:

.clearfix{
        zoom: 1;                     /*IE6*/
    }
    .clearfix:after{
        content: ".";
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    }

效果：

---

• 給父容器添加浮動，這種方法用於自己父元素就是浮動的狀況下，通常不使用這種方法，