块级元素撑开元素

一般行内元素宽度是随内容的宽度改变的，而块级元素都默认是占一行

今天我想聊聊昨天遇到很尴尬的问题：“定位的块级元素”，我在做定位时候，需要弄个边框，定位元素就继承父级的宽度，不能随内容的宽度变化而变化，我还反问同事“块级元素也能随内容撑开？”后来自己想想，联想到“高度塌陷”等之类的问题，才觉得好尴尬。。。

//悬浮框定位
<div class="hoverbox" style="display: none; ">
      <p>节点名称: aa</p>
      <p>管理节点通信地址: bbb</p>
</div>

　.hoverbox不设置宽度，p标签的宽度宽度并不能随内容长度，撑开父级元素,而是随着父级宽度一致，开始想用white-space: nowrap;但是这样仅仅内容不换行，并不能改变这个宽度

所以这个时候，需要一个包裹层（块级元素的宽度在未给定的情况下是继承父级元素宽度，有多宽就占多宽，并不会自动包裹子元素）

<div class="hoverbox" style="display: none; ">
          <div class="innerbox">
                <p>节点名称: cccc</p>
                <p>管理节点通信地址:15357</p>
           </div>
 </div>

这样有个包裹层，里外都不用设置宽度，就可以随里的内容撑开外层的宽度

 

一般设置子元素把父元素撑开方法：

 

1.把父元素设置成display:inline-block

2.float: left/right(注意父级清除浮动)