文字环绕

float可以实现块级元素的文本环绕浮动元素的布局

<div class="left">左浮动</div>
<div class="right">右浮动</div>
<div class="no-float">
  我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动。我是块级元素，我不浮动
</div>

小贴士：

行内块(inline-block)元素的文本无法实现文字环绕布局，直接不行
行内(inline)元素的文本虽然可以实现文字环绕布局，但是不建议使用，其背景色不会铺满，如下图

布局

浮动元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围

<div class="container">
  <div class="item right">右浮动</div>
  <div class="item el-block">不浮动-块级元素</div>
  <div class="item el-block">不浮动-块级元素</div>
</div>

浮动元素脱离标准流，会将后面标准流中的块级元素覆盖【但不会覆盖普通流中的行内元素和行内块元素，它们将会和浮动元素并排显示】

<div class="container">
  <div class="item el-block">不浮动-块级元素</div>
  <div class="item left">左浮动</div>
  <div class="item el-block">不浮动-块级元素</div>
</div>

浮动元素的排列位置，跟上一个元素有关系。如果上一个元素是标准流中的块级元素，则浮动元素的顶部会和上一个元素的底部对齐；如果上一个元素是标准流中的行内块元素或者行内元素，则浮动元素顶部会和上一个元素的顶部对齐，且会浮动到最左或最右侧；如果上一个元素有浮动，则浮动元素顶部会和上一个元素的顶部对齐；
```
<div class="container">
  <div class="item el-block">不浮动-块级元素</div>
  <div class="item left">左浮动</div>
</div>

<div class="container">
  <div class="item el-inline-block">不浮动-行内块元素</div>
  <div class="item left">左浮动</div>
</div>

<div class="container">
  <div class="item left">左浮动-1</div>
  <div class="item left">左浮动-2</div>
</div>
```
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
```
<div class="container">
  <div class="item left lg">左浮动-1</div>
  <div class="item left">左浮动-2</div>
  <div class="item left">左浮动-3</div>
</div>
```

清除浮动

清除浮动主要为了解决父级元素因为子级元素浮动引起内部高度为0的问题

方法：

触发浮动元素的父元素BFC，BFC详见CSS系列 (04)：盒模型详解
父容器添加属性：overflow:hidden
after伪元素 +clear属性
在浮动元素后增加一个任意DOM元素，并设置css属性 clear: both，即可清除浮动。but，这样会添加一些无语义的DOM元素，不利于后期维护。
聪明的你可能会想到after伪元素，利用CSS在元素内部的结束位创建一个元素，简直棒呆
注意：新创建的元素为行内元素，且必须要结合content属性使用
```
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 0px;
  height: 0px;
  visibility: hidden;
}

/* 兼容IE6、IE7，使用 zoom:1触发 hasLayout */
.clearfix {
  zoom: 1;
}
```

柏成

CSS系列 (05)：浮动详解

文字环绕

布局

清除浮动