div+css解决外层div不包含里边图片和内容的问题
方法/步骤
1、1.在前边浮动练习的时候,有这个个问题,div没有包含着里边的内容,看如下代码:
2、2.预览效果:
3、3.注意畋吱渎胤看上边的div,竟然是窄窄的一条,并没有像我们想想的那样把图片和文字包含在一起。W3c的解释是当元素浮动的时候,脱离了文档流,包含图片和内容的div不占据空间。那这个问题憾魄蜒祓怎么解决呢?有同学说了,既然div很窄,那么给它定位一个高度不就行了?好吧,图片现在的高度是250px,那么我们给外层的div定义一个高度height:270px;
4、4.预览效果如下:
5、5.唉,还真达到了我们想要的效果了,但是现在有个问题了,外层div的高度是固定的,当我的文字内容较多时,会出现什么效果?
6、6.这显然不能满足我们的要求那如何解决呢?很简单,把div的高度去掉,给他增加float:Left;
7、7.预览效果如下:
8、8.但是这样解决有稍僚敉视个问题那就是如果下边有内容的话,会受到当前这个div的影响,必须对接下来的内容进行清除浮动才行。还有个解决方案就是添加一个无意义的清除浮动标记理解下边的代码:
9、9.他们实现的效果是一样的。两种方法都可以!!!看自己的掌握!