这几天看了一下3c的教程，对html，ccs，以及其中框的概念，div 布局，水平菜单有了一些了解，关于浮动 有个地方不太明白，请教一下大家。
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
为何这里div的框没有包含浮动图片和文字呢？而需要加上clear才能包含呢？
按照我的理解div框内了，图片向做浮动到左边框，文字在右边了。
--
FROM 116.247.103.*

当一个元素设置了浮动时，那么该元素就会脱离原文档流。。
因此你的例子，虽然div在逻辑上包含了img 和 p
但实际上或者视觉上，后面二者已经脱离了div（.news）

因此你需要将 .news 也设置为浮动才可以

【 在 marco2798 的大作中提到: 】
: 这几天看了一下3c的教程，对html，ccs，以及其中框的概念，div 布局，水平菜单有了一些了解，关于浮动 有个地方不太明白，请教一下大家。
: .news {
:   background-color: gray;
: ...................
--
FROM 222.161.199.*

对了，唐僧兄
比如有两图，并排放，各对应几句话，css样式如何实现呢？
我现在想法是p里面放4个span，两个文字两个图片，控制他们位置，然后文字加br分行。
只是觉得好麻烦，有没有简便一点的方法。
大概就是下面这样子：
。。。。。。  图1   。。。。。。。。 图2
。。。。。。  图1   。。。。。。。。 图2
。。。。。。  图1   。。。。。。。。 图2
。。。。。。  图1   。。。。。。。。 图2
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 当一个元素设置了浮动时，那么该元素就会脱离原文档流。。
: 因此你的例子，虽然div在逻辑上包含了img 和 p
: 但实际上或者视觉上，后面二者已经脱离了div（.news）
: ...................
--
FROM 116.247.103.*

你这个例子用列表比较合适，对列表进行左浮动
确定宽度后自动换行

【 在 marco2798 的大作中提到: 】
: 对了，唐僧兄
: 比如有两图，并排放，各对应几句话，css样式如何实现呢？
: 我现在想法是p里面放4个span，两个文字两个图片，控制他们位置，然后文字加br分行。
: ...................
--
FROM 222.161.199.*

可是那个图是一个整体，就两张图，里面有几格。
每行文字对应的一格。
你的意思是列表4行，左边文字，图1，中间文字，图2，左浮动，然后文字自动换行？
【 在 huaxinjuedui (唐僧哥哥) 的大作中提到: 】
: 你这个例子用列表比较合适，对列表进行左浮动
: 确定宽度后自动换行
--
FROM 116.247.103.*