文章出處
float設計初衷就是為了實現文字環繞效果
原本頁面流布局顯示如上圖所示，運用了float屬性后就顯示為如下圖所示，這就是浮動的設計初衷
float的一些特性：包裹性、破壞性。
包裹的特性其實主要有三個表現：收縮、堅挺、隔絕。
float破壞性主要表現在使父容器塌陷（浮動使得父容器塌陷是標準而非bug，否則如果不讓父窗口塌陷怎么實現文字環境效果）
浮動的破壞性只是單純的為了實現文字環繞效果
BFC（block format context）塊級格式化上下文
如何解決浮動造成的父容器塌陷？
也就是說有兩種方法來解決，那么這兩種方法實現的差異在哪？
clear方式的具體實現？
但是上述方法會有如下圖所示不足
BFC/hasLayout具體實現方式？
兼容各瀏覽器清除浮動的通用方式
.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
.clearfix{*zoom:1;}
其實還有更好的方式
.clearfix:after
{
content: '';
display: table;
clear: both;
}
.clearfix
{
*zoom: 1;
}
濫用浮動
其實.clearfix的樣式只應用在包含浮動子元素的父級元素上。
如果放到不包含浮動子元素的父級元素上那就是濫用。如果亂用hasLayout往往會讓IE6/IE7做出出格的事情，因為浮動會觸發hasLayout，所以濫用浮動會發生很多怪異現象。
打句廣告：在html中一般會用nbsp;來表示空格，事實上nbsp原來是如下圖所示的意思
運用浮動的一些特性
用demo先來說說第2個特性吧，html代碼如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動與display:block化</title>
<style>
.ovh
{
overflow: hidden;
}
.red
{
color: #cd0000;
}
[hidden]
{
display: none;
}
</style>
</head>
<body>
<p id="first">這是一個沒有設置<code>float</code>屬性的按鈕：</p>
<p class="ovh"><input type="button" id="btnShow" value="點擊我顯示display屬性值"></p>
<p hidden="">此時，按鈕的display屬性值是：<span id="result" class="red"></span></p>
<p>點擊下面的按鈕讓上面的按鈕添加<code>float: left</code>的聲明：</p>
<p><input type="button" id="btnAdd" value="上面的按鈕添加float:left"></p>
<script>
var btnShow = document.getElementById("btnShow"),
btnAdd = document.getElementById("btnAdd"),
result = document.getElementById("result"),
first = document.getElementById("first");
if (btnShow && btnAdd && result) {
btnShow.onclick = function () {
// 獲得該按鈕的display值
var display = this.currentStyle ? this.currentStyle.display : window.getComputedStyle(this, null).display;
// 顯示結果
result.innerHTML = display;
result.parentNode.removeAttribute("hidden");
// repain fix IE7/IE8 bug
document.body.className = "any";
};
// 設置浮動按鈕的點擊事件
btnAdd.onclick = function () {
btnShow.style["cssFloat" in this.style ? "cssFloat" : "styleFloat"] = "left";
// 文字描述的變化
this.value = "上面的按鈕已經設置了float:left";
btnShow.value = "再次點擊我確認display屬性值";
first.innerHTML = first.innerHTML.replace("沒有", '<del>沒有</del>');
// 結果隱藏
result.parentNode.setAttribute("hidden", "");
// 按鈕禁用
this.setAttribute("disabled", "");
};
}
</script>
</body>
</html>
View Code
從上述代碼運行效果圖可知原先為display:inline-block的元素由于增加了float:left則變成display:block
再說說浮動去空格吧
示例代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動去空格</title>
<style>
button
{
margin: 0;
}
p
{
clear: both;
}
</style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<p><input type="button" id="trigger" value="點擊按鈕浮動"></p>
<script>
var trigger = document.getElementById("trigger"),
buttons = document.getElementsByTagName("button");
var length = buttons.length;
if (trigger && length > 0) {
trigger.onclick = function () {
for (var index = 0; index < length; index += 1) {
buttons[index].style["cssFloat" in trigger.style ? "cssFloat" : "styleFloat"] = "left";
}
};
}
</script>
</body>
</html>
View Code
運行效果圖如下
原先按鈕之間是有空格的，點擊下面增加浮動按鈕后，原先按鈕就沒有任何空格了，事實上并非空格去掉了，只是空格移動父容器所有浮動元素最后
浮動與布局
最簡單的應用莫過于
浮動與單側固定布局
有兩種方法
1、左邊元素使用width+float，右邊元素使用padding-left或者margin-left
2、左邊元素使用width+float，右邊元素也使用width+float不過這次是用right值
如下所示
.left_img
{
width: 56px;
float: left;
}
/* 下面這個是固定布局寫法 */
.right_text_fixed
{
width: 484px;
float: right;
}
/* 下面這個是流體布局寫法 */
.right_text_flow
{
margin-left: 76px;
}
浮動與智能自適應的流體布局
核心代碼如下所示：
.left_img
{
float: left;
margin-right: 20px;
}
/* 下面這個是固定布局寫法 */
.right_text
{
display: table-cell;
*display: inline-block;
width: 2000px;
*width: auto;
}
讓IE7飆淚的浮動問題
一個一個來說（我說的是在IE7及以下瀏覽器）
包含clear的浮動元素包裹不正確
html代碼如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>含clear的浮動元素包裹不正確的bug</title>
<style type="text/css">
html, body
{
background: #fff;
color: #000;
}
div
{
padding: 5px;
margin: 5px;
background-color: #eee;
border: 1px solid #bbb;
clear: left;
color: black;
float: left;
}
</style>
</head>
<body>
<div>
這個<div> 包含 float: left 和 clear: left. 與我們通常理解的表現一致，寬度就是文字內容的寬度。
</div>
<div>
這個同樣是一個 <div>, 左浮動，同時含有 clear: left 的 <div>. 因為這一段的文字內容很長，所以，按照我們通常的理解，這個 <div> 占據的長度應該有整個 body 這么長。但是，在 Internet Explorer 7 下，事與愿違。 這個具有左浮動，同時含有 clear: left 的 <div> 僅僅占據了部分body的內容區域寬度。---- 我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字，我是占位置的文字……
</div>
<div>
這是第3個具有float: left 和 clear: left 的 <div> . 改變你瀏覽器的寬度。
</div>
</body>
</html>
View Code
實現效果圖如下：
當我們改變窗口大小時，效果圖如下
浮動元素倒數2個莫名垂直間距bug
html代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動元素倒數2個莫名垂直間距bug（超過3浮動元素）</title>
<style type="text/css">
html, body
{
background: #fff;
color: #333;
}
div
{
width: 100px;
}
p
{
margin-right: 1px;
}
span
{
border: 1px solid #aaa;
float: left;
width: 120px;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</p>
</div>
</body>
</html>
View Code
也就是說當超過3個浮動元素時，浮動元素倒數第2個元素則會在ie7及以下瀏覽器出現垂直間距問題，顯示如下圖所示
浮動元素倒數2個浮動最后一個字符重復bug
html代碼如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動元素倒數2個浮動最后一個字符重復bug</title>
<style type="text/css">
html, body
{
background: #fff;
color: #333;
}
div
{
width: 100px;
}
p
{
margin-right: 1px;
}
span
{
float: left;
width: 120px;
}
</style>
</head>
<body>
<div>
<p>
<span>A</span>
<span>B</span>
<span>C</span>
</p>
</div>
</body>
</html>
View Code
在ie7及以及顯示效果圖卻出現如下所示讓人哭笑不得的場景（居然多了一個C）
浮動元素與文本不在同一行的問題
html代碼如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮動與同一行的差異</title>
<style type="text/css">
html, body
{
background: #fff;
color: #333;
}
div
{
background-color: #eee;
border: 1px solid #bbb;
padding: 5px;
}
span
{
float: right;
}
</style>
</head>
<body>
<div>
左側標題
<span>右浮動</span>
</div>
</body>
</html>
View Code
出現如下所示效果圖(是不是會很無語)
如何使用float不出現上述所述怪異現象
不用使用浮動去做一些堆磚頭的布局，使用流體布局相關的方法就可以避免怪異問題，總之就是不要濫用浮動
文章是看幕課網張鑫旭的視頻進行的筆記總結 在此貼出視頻的地址http://www.imooc.com/learn/121
在此還推薦一下王朋福博客css系列 寫的也挺不錯的
