---
# System prepended metadata

title: CSS切版
tags: [css]

---

###### tags:`css`

CSS切版
========

## clearfix 因內部浮動撐開結構，導致父元素無法辨識 
> 圖解 [color=#f27b13]
![](https://i.imgur.com/tjGUjVr.png)

>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; 快速神排版
```css=
.wrap{
      width:960px;
      margin:auto;
      background:#ccc;
      display: flex;
      flex-wrap:wrap;
    }
```

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






