bootstrap专栏 04.元素属性设置 03.浮动与定位

# 03.浮动与定位

[toc]{type: "ol", level: [4]}

#### css结构
```css
.wh {
    width: 400px;
    height: 200px;
    background: #86cfda;
    margin: 10px 10px;
}
#d1 {
    border: 2px brown dashed;
}
```

#### 关闭按钮
```html
<button class="close"><span>&times;</span></button>
```
![浮动与定位-关闭按钮](03.浮动与定位-关闭按钮.png)

#### 清除浮动
- 方式1: clearfix
> 防止父标签塌陷
```html
<div id="d1" class="clearfix">
    <div class="wh float-left">
        left
    </div>
    <div class="wh float-right">
        right
    </div>
</div>
```
![浮动与定位-清除浮动-方式1](03.浮动与定位-清除浮动-方式1.png)

- 方式2: float-none
> 使元素恢复独占一行的特性
```html
<div class="wh float-none">
    float none
</div>
```
![浮动与定位-清除浮动-方式2](03.浮动与定位-清除浮动-方式2.png)

#### 隐藏文本
> 可被爬虫抓取到
```html
<div class="wh text-hide">
    text hide
</div>
```
![浮动与定位-隐藏文本](03.浮动与定位-隐藏文本.png)

#### 响应式浮动
```html
<div class="wh float-md-left float-lg-right">
    left/right
</div>
```
![浮动与定位-响应式浮动-大](03.浮动与定位-响应式浮动-大.png)
![浮动与定位-响应式浮动-小](03.浮动与定位-响应式浮动-小.png)

#### 内容溢出
- 滚动
> 超出部分出现滚动条
```html
<div class="wh float-left overflow-auto">
    left<br><br><br><br><br>left<br><br><br><br><br>left
</div>
```
![浮动与定位-内容溢出-滚动](03.浮动与定位-内容溢出-滚动.png)
- 隐藏
> 超出部分隐藏内容
> 不保留超出的位置
```html
<div class="wh float-left overflow-hidden">
    left<br><br><br><br><br>left<br><br><br><br><br>left
</div>
```
![浮动与定位-内容溢出-隐藏](03.浮动与定位-内容溢出-隐藏.png)

#### 设为不可见
> 依然占据位置
```html
<div class="wh float-left invisible">
    不可见，占位置
</div>
```
![浮动与定位-设为不可见](03.浮动与定位-设为不可见.png)