CSS 位置摆放

情况1 ：

   1. div里面元素都是float，div撑不起来？

    A：在最新的浏览器中，可以用3种方式解决：

        * 为div添加 overflow:auto

        * 在div中最后添加一个div（不可见），消除这个div的float clear:both

        * 还有一种设置：在父元素div加一个.after伪元素

    原因与解释：http://paranimage.com/css-float-attribute/

    注意：CSS定位优先采用浮动+margin方式，减少应用position像素设置

   2. 如何设置div居中？

        * 设置div的width：800px、margin：0 auto；

   3. 利用“div元素撑不起来”实现文字等浮现在其他元素上面，且不占用实际位置。

       代码如下：

<div class= style="width:220px">
	<img src="img/ID001.jpg"  style="width:220px;"/>
	<div class="HomeGraphText">
		<div style="color:white;float:left;position:relative;top:-20px;background-color:rgba(0,0,0,0.7);width:220px;">破碎的杯子</div>
	</div>
</div>

　　 效果如下：

破碎的杯子

破碎的杯子

df的

这样“破碎的杯子”便覆盖在博客园图片的上面，且