初入门，对 W3School 的一个例子有疑问，关于 float:left; 的。_html/css_WEB-ITnose

W3School 的例子在此    http://www.w3school.com.cn/tiy/t.asp?f=html_layout_ps ，请对照里面的代码和以下的图来理解的我问题，谢谢。  
 
首先，我不明白的是，删除第一个「float:left;」后，为什么会如图般多出了一行空白？难道「float:left;」还有什么隐含的规则属性？  
     
我知道「float:left;」是向左浮动，W3School 的   CSS 文档说明里只是说 "浮动元素会生成一个块级框" ，那没了「float:left;」就是内联元素，即便如此也不该多出一行啊，请各位指出我的问题所在。  
 
还有，删除第二个「float:left;」后，灰色区域向左缩进去（位移） 150px 这个我可以理解，但是为什么上面的文字没有跟着缩过去（位移）？  
     
其实删了第二个「float:left;」后，灰色区域为什么会发生位移，是因为黄色区域是块级元素，而灰色区域是内联所以互不干扰？就算是那样，灰色区域的「Content goes here」文字应该跟着左移，跟黄色区域上的字重复才对啊，请各位为我指点迷津。  
 
本人新手，刚开始自学 HTML ，可能对元素之间的关系理解不深，请各位指教下，先说声谢谢啦！

回复讨论(解决方案)

第一个问题：之所以或空出一行是因为其下的

标签有一个默认的margin的属性。  
第二个问题：因为之前没有特别注意这个问题，所以我猜测是p里面的字符会自己默认有一个float:left的属性，这样的话浮动元素必须挨着浮动元素的原则下，所以这个行文字才没有随着p位移。

1. DIV标签的默认样式margin-top作怪. 最好在样式表开头加个  
 

<br/>

 
 
 2.也是DIV的默认属性width:100%

如上：其实大多数的标签都有可能默认有margin,padding属性值是10px,因此多数css都将这些值先设为0，以达到自己想要的效果：body,html,h1,h2.....p,ul,li,....{padding:0;margin:0}  
 
2、怎么可能会重复呢，p都是有宽度的，就算你不设，也是根据里面的内容自动宽度。他们两个不是同一个p,也就是不同的容器，怎么可能会重复到另一个容器上，在屏幕宽度允许的情况下按顺序排在他后面。其实你的第二个问题跟第一个问题是差不多的，就是因为有默认的10px,你并没有计算在内，以为150px + 350px 就是你想要的，其实你还要考虑上下左右各10px值的。  

第一个问题：之所以或空出一行是因为其下的

标签有一个默认的margin的属性。  
第二个问题：因为之前没有特别注意这个问题，所以我猜测是p里面的字符会自己默认有一个float:left的属性，这样的话浮动元素必须挨着浮动元素的原则下，所以这个行文字才没有随着p位移。

解释的很好！

1、删除menu的h2，，，即可解决。  
2、为content加上position分别赋予relative、absolute，，，，查看其效果。。  

1，空出的那一行，是因为里面的h2的margin-top与相邻的父元素重叠  
普通流中，垂直方向的margin重叠（压缩/叠加）是css的规定。  
当元素浮动的时候，垂直方向的margin不重叠。  
 
2，你把黄色的背景色去掉，就可以看到，灰色的部分是从最左边开始的。  
黄色浮动而灰色部分不浮动，那么他的块框会如同黄色元素不存在一样从最左端开始占位，但是他的内容（文本）会环绕在浮动元素的右边和下边（如果内容够长的话）。  
 
这就是所谓的：浮动元素【部分】脱离普通流。  
和绝对定位元素的【完全】脱离普通流不同，浮动元素会占位，也会影响后面的元素。  
这些视觉格式化的规定，看一下w3.org的css手册都可以看到。  
视觉格式部分的内容很重要，关于浮动、定位等的疑问都有答案。  
或者看看《css权威指南》。  

第一个问题：之所以或空出一行是因为其下的

标签有一个默认的margin的属性。  
第二个问题：因为之前没有特别注意这个问题，所以我猜测是p里面的字符会自己默认有一个float:left的属性，这样的话浮动元素必须挨着浮动元素的原则下，所以这个行文字才没有随着p位移。

 
那样我想问一下：  
 
第一个问题：为什么加入第一个 float:left; 后，其下的 

 标签会失效？是遵循了什么规则？  
第二个问题：那反过来，有什么办法能使得文字能随着p位移呢？我尝试为 p#content 添加了 float:none; 或者是用 

第一个问题：之所以或空出一行是因为其下的

标签有一个默认的margin的属性。    
第二个问题：因为之前没有特别注意这个问题，所以我猜测是p里面的字符会自己默认有一个float:left的属性，这样的话浮动元素必须挨着浮动元素的原则下，所以这个行文字才没有随着p位移。

解释的很好！
 
版主我还想一下：  
 
第一个问题：为什么加入第一个 float:left; 后，其下的 

 标签会失效？是遵循了什么规则？  
第二个问题：那反过来，有什么办法能使得文字能随着p位移呢？我尝试为 p#content 添加了 float:none; 或者是用 

一：

标签没有失效，我之前说的

标签就是

（我之前没有注意是2还是1）。  
二：这你要好好去理解浮动这个属性，一句两句很难解释清楚。如果你想要黄色的那块能完全遮住灰色的那块（包括文字），那么你就用绝对定位。

一：

标签没有失效，我之前说的

标签就是

（我之前没有注意是2还是1）。  
二：这你要好好去理解浮动这个属性，一句两句很难解释清楚。如果你想要黄色的那块能完全遮住灰色的那块（包括文字），那么你就用绝对定位。

 

以上就是初入门，对 W3School 的一个例子有疑问，关于 float:left; 的。_html/css_WEB-ITnose的内容，更多相关内容请关注PHP中文网（www.php.cn）！