Css float 弄乱了布局

Question

我想要这个布局，其中有一个矩形框。在左侧的框内有一个文本，右侧有一个图像。如果我在没有表格的情况下这样做， float 会导致框内的元素出现在外面。我该如何进行这项工作？

<div style="width: 100%; border-style:solid;">
  <span style="float: left;">  
     <h3> Your appointment Details</h3>
  </span>
  <span style="float: right;">
     <img src="someImage"/>
  </span>
</div>

Answer 1

将其添加到父容器:

.parent {
    overflow: hidden;
}

<div class="parent" style="width: 100%;border-style:solid;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

jsfiddle with example of solution