1. 套一層div設(shè)置成inline-block 呈現(xiàn)為inline 是可以用text-align使他水平居中的

2. 行內(nèi)元素（span）浮動(dòng)了就變成塊級(jí)元素了 ,text-align只能使 inline水平居中

3. 你這種寫法的清除浮動(dòng)只能使父級(jí)不受浮動(dòng)影響

4 .

.inner1{
  float: left;
  border: 1px solid red;
  clear: left;
}
.inner2{
 float: left;
  border: 1px solid red;
  clear: right;
}

套了一個(gè)div，div沒有浮動(dòng)，div也轉(zhuǎn)換成了行內(nèi)塊，行內(nèi)塊是可以被tex-talign：center的
所以你的 topbar居中的并不是inner 而是那個(gè)div。而因?yàn)楦负凶佣急慌驳街虚g了，子盒子兩個(gè)span當(dāng)然就跟著父盒子走了

如果一開始你沒給span浮動(dòng)，脫離文檔流，那直接給topbar設(shè)置text-align:center也能居中啊。text-align是規(guī)定元素中的文本的水平對(duì)齊方式，前提是，標(biāo)簽內(nèi)的東西，屬于標(biāo)準(zhǔn)輸出流，不能是浮動(dòng)或者定位的標(biāo)簽。

搞不懂為什么span要浮動(dòng)。直接去掉span的float:left。就能居中了啊

浮動(dòng)會(huì)使元素塊狀化，text-align就控制不了了