行內元素和塊級元素對於前端來說是一個很重要的概念。在CSS中，只有塊級元素有物理屬性，而元素則有三種形態：
1. 塊級元素：有物理屬性，width,height寫值起作用，而且要占據一行。
2. 行內元素：沒有物理屬性。但是margin，padding值有用。不占據一行，后邊可以有兄弟元素。
3. 即是塊又是行內，根據兄弟元素決定。
一般來說，將行內元素和塊級元素進行轉換的話是給其加上display這個屬性。行內→塊級，display:block;塊級→行內,display：inline;
這也是大家都熟知的一種方式。而我今天看到了使用float將行內元素轉換為塊級元素。是否可以呢？我們嘗試一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="charset=utf-8"/> 5 <title></title> 6 <style type="text/css"> 7 p{ 8 background-color:yellow; 9 } 10 a{ 11 background-color: silver; 12 } 13 </style> 14 </head> 15 <body> 16 <p>test_1</p> 17 <p>test_2</p> 18 <p>test_3</p> 19 <a href="#">我是鏈接</a> 20 </body> 21 </html>
p是我們常用的塊級元素，而a是我們常用的行內元素。黃色占據了文檔流的一行，銀色僅占據了內容的那一片區域。
我們再給它們加上物理屬性上去。
<style type="text/css">
p{
background-color:yellow;
width: 100px;
height: 100px;
}
a{
background-color: silver;
width: 100px;
height: 100px;
}
</style>
1-1
我們可以看到塊級元素<p>受到了影響，而<a>元素則沒有受到影響。
我們再給<a>元素添加一個浮動的屬性。
<style type="text/css">
p{
background-color:yellow;
width: 100px;
height: 100px;
}
a{
background-color: silver;
float: left;
width: 100px;
height: 100px;
}
</style>
1-2
我們可以看到<a>元素在添加了float屬性后，我們原來設置的width和height生效了。如果我們再<a>元素后再添加一個<a>元素，效果如下。
1-3
結論：float就是隱性的把行內元素轉化為塊元素，對內的話擁有了物理特性。對外則還是是行內元素的屬性，不占據一行。
既然float能讓行內轉換為塊級。那么，用position是否也可以呢？
<style type="text/css">
p{
background-color:yellow;
width: 100px;
height: 100px;
}
a{
background-color: silver;
position: absolute;
width: 100px;
height: 100px;
}
</style>
我們發現使用了position以后呈現的效果和“1-2”是一樣的。就是說position也可以使行內元素轉換為塊級元素。至於要使用absolute。這是因為absolute會使得元素脫離文檔結構，這一點和float是一樣的。再者如果這里設置了兩個<a>元素的話，第一個<a>會被第二個<a>元素蓋住。有多個的話則遵循“后來者居上”的原則。
所以說，不管是float還是position，使用它們都可以將行內元素轉換為隱式的塊級元素，不過隨之帶來的壞處就是會影響兄弟元素。