search

Home  >  Q&A  >  body text

html - css浮动的问题？？

<!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的宽度然后再居中。这是为什么？

巴扎黑巴扎黑2809 days ago696

reply all(3)I'll reply

  • 迷茫

    迷茫2017-04-17 14:02:19

    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...

    reply
    0
  • 黄舟

    黄舟2017-04-17 14:02:19

    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

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 14:02:19

    A master who loves fishing explained this issue very clearly. It is recommended to take a look at http://www.zhangxinxu.com/wor...

    reply
    0
  • Cancelreply