请教下~

上山打老虎

代码如图，为何第一块左半边的浮动<a>里面的内容不能包含到大框里~代码
样式
显示效果按理文字后面应该接着下面的手机图标~但是浮动不上去，希望帮忙看看

[HTML] 纯文本查看 复制代码

<div class="left">
           <p>您好，中国瓷砖商城欢迎您!</p>
           <div class="leftShop"><a href=""><img src="Images/images/留言版_03.png" width="11" height="16" />手机商城</a></div>
</div>

[CSS] 纯文本查看 复制代码

.nr{width: 1200px;height: 40px;margin: 0 auto;font-size: 12px;}
.left{height: 36px;line-height: 36px;float: left;font-size: 12px;display: inline-block;border: 1px solid #CCCCCC;}
.leftShop{float: left;display: inline-block;}

file:///C:/Users/18392/AppData/Roaming/Tencent/Users/183921342/QQ/WinTemp/RichOle/~$FI5Q%25$VY)~D)K0IY@@NWE.png

上山打老虎

同行之间P和A标签没有同时转换成想通元素，P还是行级元素，没有受到浮动效果，a标签浮动没有产生效果~/备注/

falost

在这里 p 和 div 都是 块级元素，你只浮动了 div 元素 ，并改变为行内块元素  ， 却没有浮动 p 元素，p元素还是块级元素，还占据着一整行的位置，下面的div 肯定是上不去了。
解决办法：
第一种  将 p 和 div  都改为行内块元素（inline-block）
第二种  将 p 和 div 都浮动起来 float 即可
第三种  给他们一个position值 将他们固定上去

希望能够帮助到你！