block元素與float元素互相影響

block元素與float元素組合來布局並不常見，inline-block與float元素一起做流動性布局是比較好的。以下是我使用block元素與float元素組合來布局的一些實驗結論：

1、block元素如果將margin計算在內一定會獨佔一行，適合做自適應瀏覽器視窗大小的區塊。而float元素預設大小剛好包裹內容，更適合固定大小的div。

2、block元素布局不會收到float元素影響，但是float元素會躲開block元素，而且連margin都會躲開。

在實現乙個兩欄布局，右側固定寬度，左側根據瀏覽器寬度進行自適應變化中，最好的方法是使用乙個inline-block元素與乙個float元素去組合。

但是我還是嘗試了一下，用block元素來進行自適應變化，並用margin來將浮動元素位置留出來。這樣就必須讓float元素在文件中先出現，然後block元素就能和float元素在同一行了。否則block元素將會把float元素擠到下一行。

測試文字

這個**實現了上述功能，要注意在body中先寫了float的右div，後寫了bfc特性的左div，而不是正常的從左到右。這是因為float元素在浮動時不會去占用別的元素的margin。但是如果先渲染float元素讓這個元素先把地方給佔了，後渲染的bfc也無法改變float元素位置了。