css清除浮動

什麼是清除浮動

當父級元素高度不定，子級元素浮動之後致使佈局破壞父級沒法撐開。解決這種狀況的方式叫作清除浮動

• 正常狀況

*浮動之後

使用overflow屬性

<div id="outer">
    <div id="inner"></div>
  </div>
複製代碼

解決方法

#outer{
    width: 200px;
    overflow: hidden;
  }
  #inner{
    width: 100px;
    height: 100px;
    float: left;
  }
複製代碼

當內容超出元素框時，overflow可對內容進行處理。

使用clear屬性

<div id="outer">
    <div id="inner"></div>
    <div id="clear"></div>
  </div>
複製代碼

解決方法

#outer{
    width: 200px;
  }
  #inner{
    width: 100px;
    height: 100px;
    float: left;
  }
  #clear{
    clear: both;
  }
複製代碼

缺點：生成了多餘的html元素

僞元素加clear

<div id="outer">
    <div id="inner"></div>
  </div>
複製代碼

解決方法

#outer{
    width: 200px;
    border: 1px solid red;
  }
  #inner{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    float: left;
  }
  #outer::after{
    clear: both;
    content:'';
    display: block;
  }
複製代碼

使用僞元素能達到上面一樣效果，但沒有生成html元素爲更優解。

BFC

<div id="outer">
    <div id="inner"></div>
  </div>
複製代碼

解決方法

#outer{
    width: 200px;
    border: 1px solid red;
    display: flow-root;
  }
  #inner{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    float: left;
  }
複製代碼

css高級用法，BFC清除浮動