float

一、對於BFC中的塊級元素（特指display: block）而言，即float元素會感知到其前面塊級元素，但塊級元素感知不到float元素的存在，即float元素不影響塊級元素的佈局。

二、對於BFC中的inline或者inline-block元素而言，float元素是感知不到到inline與inline-block元素存在的，但行內元素能感知到float元素的存在，即float元素會影響到後面行內元素的佈局。

三、當float元素高度爲0時，其水平方向上的margin,padding屬性會失去做用。對於這點我是這樣理解的：

       設置float浮動的元素自動獲取display: block樣式。對於display：block元素，當其高度爲0時，其水平方向上的margin，padding屬性也不會起做用。須要注意的是當塊級正常流元素的高度爲auto，並且只有塊級子元素時，其默認高度爲從最高塊級子元素的外邊框邊界到最低塊級子元素外邊界之間的距離（參考《CSS權威指南》P180）。

 一、內聯元素元素與float元素

<div style=‘border: solid 1px black;height: 150px;’> <div style=‘display: inline-block;；border: solid 1px green; height: 20px;’> 表示我在float的前面 </div> <div style=‘float: left；border: solid 1px green; height: 20px;’> 我是float元素 </div> <div style=‘display: inline-block;: solid 1px green; height: 20px;’> 表示我在float的後面 </div> </div>

能夠看到兩個inline-block元素不會影響float元素，但float元素會影響inline-block元素。

 二、block元素與float元素

<div style=‘border: solid 1px black;height: 150px;’> <div style=‘border: solid 1px green; height: 20px;’> 表示我在float的前面 </div> <div style=‘float: left；border: solid 1px green; height: 20px;’> 我是float元素 </div> <div style=‘border: solid 1px green; height: 20px;’> 表示我在float的後面 </div> </div>

能夠看到兩個block元素不會受float元素的影響，可是float元素會受block元素的影響。

三、float元素高度爲0

<div style=「border: solid 1px red」> <p style=「margin-right: 100px;padding-right: 100px;float:left」>I am P element</p> <span style="background: pink">I am span flowing the p element</span> </div>

雖然爲float元素設置了margin-right: 100px;padding-right: 100px; 可是float元素仍是被無情地忽略了，他在父元素中沒有實際佔有位置。