float的特性一
.元素‘浮動’
.脫離文檔流
.但不脫離文本流
首先看一個案例，直觀的了解下float的特性
<style> .container{ background: red; width: 400px; } .p1{ background: green; float: left; width: 200px; height: 50px; } </style> <body> <div class="container"> <span class="p1">float</span> <div class="p2"> 很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字很長的文字 </div> </div> </body>
這個效果很明顯就是，p1設置了向左浮動，高度50，寬度200，背景綠色。浮動之后有什么影響呢？我們上面注意點之一是脫離了文檔流。
我們看到p2在使用的時候占據了p1的空間，跟container是一樣的空間大小。但是他影響了p2文字的展現。整個文字都繞開了p1。這種布局方式就是float本身的一個含義。float本身就是用於圖文環繞效果的。所以這個解釋了上面的注意點，float元素脫離了文檔流，但是不脫離文本流。
float的特性二
.對自身的影響：
.形成“塊”（BFC）
比如上面的例子，p1這個float元素可以設置寬高。span元素本身是無法設置寬高的。上面的p1中，float屬性一旦去除，寬高就會失效
.位置盡量靠上
.位置盡量靠左(右)
我們再看一個案例
<style> .container{ background: red; width: 400px; } .p1{ background: green; float: left; width: 200px; height: 50px; } </style> <body> <div class="container"> <span>寫幾個字</span> <span class="p1"> float </span> <span class="p1"> float </span> </div> </body>
如圖，首先看到的幾個字，如果上面demo的p2一樣。是一個正常的元素。我們說會盡量靠上和盡量靠左。所以是左上角的位置。再往下又有一個float元素，這兩個float元素樣式是一模一樣的。但是那幾個字是必須排的。所以他沒辦法越過那幾個字。所以盡量靠上，靠左，就成了這副樣子。
如果p1的寬度加起來小於 400減去字的長度，第二個元素就能往上。
如果，兩個flaot元素長度加起來大於400了，他就會往下掉。。這就是盡量靠上，盡量靠左的含義。
float特性三
.對兄弟元素的影響
.上面貼非float元素（一般float元素上面貼的都是非float元素）
.旁邊貼float元素（靠左，或者靠右的時候貼float元素）
.不影響其它塊級元素位置
.影響其它塊級元素內部文本（三四兩點就是特性一說的脫離文檔流，不脫離文本流）
.對父級元素的影響
.從布局上“消失”（相當於從父級的空間里面消失了，消失了意味着父級不會再管他的寬高）
.高度塌陷（因為在父級的空間里消失了，所以父級對高度有可能會塌陷，防止塌陷的辦法就是overflow）
<style> .float{ float: left; width: 100px; height: 100px; background: red; } </style> <body> <div class="main"> <span class="float"> float元素 </span> </div> </body>
我們看到float元素的寬高是有100像素的，但是main的高度卻是0，沒有被撐起來。高度塌陷了,防止塌陷的常用辦法就是設置overflow，創建一個BFC。
float兩欄布局
<style> .container{ width: 800px; height: 200px; } .left{ float: left; background: red; width: 200px; height: 100%; } .right{ background: blue; margin-left: 200px; height: 100%;
padding-left: 10px; } </style> <body> <div class="container"> <div class="left"> 左 </div> <div class="right"> 右 </div> </div> </body>
float三欄布局
<style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> <body> <section class="layout float"> <style media="screen"> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮動解決方案</h1> 1、這是三欄布局中間部分 1、這是三欄布局中間部分 </div> </article> </section> </body>
