<!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的宽度然后再居中。这是为什么？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you change the background picture and take a look, you will find that the pictures and everything are covered, and only the words can run around
Give you a float https://segmentfault.com/a/11...
This is an expected behavior. When dom elements are typeset, they will avoid the position of floating elements. Therefore, if you want the red block to completely cover the yellow block, you cannot use float. You can use position:absolute to replace
A master who loves fishing explained this issue very clearly. It is recommended to take a look at http://www.zhangxinxu.com/wor...