###### tags:`css`

CSS切版
========

## clearfix 因內部浮動撐開結構，導致父元素無法辨識
> 圖解 [color=#f27b13]

>html部分

<div class="wrap">
    <div class="header clearfix">
      <ul class="menu">
      </ul>
    </div>
    <div class="content">
    </div>
  </div>

> css部分

.logo{
float:left;
}
.menu{
float:right;
}
.menu li{
float:left;
}

>html部分

<div class="header clearfix">
    <h1 class="logo">
        <a href="#">六角學院</a>
    </h1>
    <ul class="menu clearfix">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
     </ul>
</div>

## display: flex; 快速神排版

.wrap{
      width:960px;
      margin:auto;
      background:#ccc;
      display: flex;
      flex-wrap:wrap;
    }

## position:fixed; 固定在畫面

.amos{
      width:200px;
      height:100px;
      background-color: #aaa;
      position:fixed;
      opacity: 0.6;
      top:0;/*決定固定位置*/
      right:0;/*決定固定位置*/
      bottom:0;
      left:0;
      margin:auto;
    }