<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
padding:100px;
height:100px;
}
.box{
width:800px;
background-color: #f0f0f0;
}
.box .boxBar1{
background-color: red;
height:100px;
float: left;
width:100px;
}
.box .boxBar2{
background-color: yellow;
height:100px;
width:800px;
text-align: center;
}
</style></head>
<body>
<p class="box">
<p class="boxBar1">
</p>
<p class="boxBar2">11
字体居中
</p>
</p>
</body>
</html>
我设置了子元素boxBar1 向做浮动，子元素boxBar2没有浮动，理论上他会给boxBar1让出他自己的那一部分呈现在页面上
。这时候我设置了boxBar2宽度和父亲宽度相等。但是我设置了字体居中，字体竟然没有相对于本身800的宽度居中。而是相对于本身宽度减去boxBar1的宽度然后再居中。这是为什么？
你換一個背景圖看看，你會發現圖片什麼的都蓋住了，就字能跑來跑去的
給你講float的https://segmentfault.com/a/11...
這是符合預期的行為，dom元素在排版時，會將浮動元素的位置避開，所以，如果想實現紅塊完全蓋住黃塊，就不能用float,可以使用position:absolute來代替
這個問題，愛釣魚的大神講的非常清楚，推薦看一看http://www.zhangxinxu.com/wor...