float脫離文字資料流，可是為什麼文字卻會有環繞的效果，這點實在是神奇，於是乎就去問了師匠：
Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.
float其實是脫離了常規流，當然這麼說肯定是聽不懂的啦，我們來看一個樣本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字環繞</title>
<style type="text/css">
html, body {
margin: 0 auto;
padding: 0;
}
.container {
width: 300px;
}
div {
box-sizing:border-box;
}
img {
float: left;
}
.div1 {
border: #c2ffaa 2px solid;
height: 50px;
width: 20px;
float: left;
}
.div2 {
border: #e7a6b2 2px solid;
height: 50px;
width: 70px;
}
.div3 {
border: #a2c5e2 2px solid;
height: 50px;
width: 20px;
}
</style>
</head>
<body>
<div class="container">
<!-- <img src="logo2013.png">
<p>這是一段文字，This is Chinese, this is English，Hello World, Hello Sky....</p> -->
<div class="div1"></div>
<div class="div2">1</div>
<div class="div3"></div>
</div>
</body>
</html>
好了，很顯然，有一種看上去覆蓋的效果，實際上，這是由渲染次序決定的：
A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.
如果一個 float 元素覆蓋在了一個在常規流裡的元素 那麼 float 元素會在沒有用 position 定位的區塊層級元素之前渲染
看看，又和position扯上關係，而且position還能決定渲染順序，頓時感覺好麻煩。
而至於文字，不多說，基本上屬於渲染設定類，人家就是會避開浮動部分顯示。
在使用浮動的時候經常會遇到一個古怪的事情：
img {
float: right;
}
見證奇蹟的時刻到了！有一種比較醜陋的方法可以解決這個問題，它叫做清除浮動（clearfix hack）.
讓我們加入一些新的CSS樣式：
.clearfix {
overflow: auto;
}
現在再看看發生了什麼：
這個可以在現代瀏覽器上工作。如果你想要支援IE6，你就需要再加入如下樣式：
.clearfix {
overflow: auto;
zoom: 1;
}
有些獨特的瀏覽器需要“額外的關照”。清除浮動這譚水很深很深，但是這個簡單的解決方案已經可以在今天所有的主要瀏覽器上工作。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
