在不设置浮动和位置的情况下 div 与div 之间为什么是换行的

在不设置浮动和位置的情况下 div 与div 之间为什么是换行的？

 

在不设置浮动和位置的情况下 div 与div 之间 ， 无论在什么浏览器在下都是换行的。这是为什么呢？

 

因为div , p , h1 等元素称为块级元素，在块级框内，块级框 按HTML语言从上至下依次排列。

那么块级框是不是默认设置了float   clear 这样的属性呢？

 

 

如下代码 ：

 

<div id="main"> <div id="sub1"> 这里是块1 ： 这里是块1的区域。 </div> <div id="sub2"> 这里是块2 ： 这里是块2的区域。 </div> </div>   

 

显示如下：

 

这里是块1 ： 这里是块1的区域。

这里是块2 ： 这里是块2的区域。

 

div sub1 和div sub2 必定是换行的， 这是为什么呢？许多人认为，  div 的style 默认情况就是 clear:left ,float:left 的。

果然是这样吗？我们给div 设置些样式再看看。

 

#main{ border:3px solid black; } #sub1{ border:3px solid #ff0000; } #sub2{ border:3px solid #ff0000; } 

 

这里是块1 ： 这里是块1的区域。

这里是块2 ： 这里是块2的区域。

 

 

 通过颜色划定可以看到在不设定width的情况下， div sub1 和 div sub2 的width 都和父级元素一样宽，

如果div sub1 那么宽了， 那 div sub2 必定要换行才能正确显示。这样看不出div 的style 默认情况是否 clear:left ,float:left 。

 

接下来，我们再看看设定width的情况。

 css定义如下：

#main{ width:400px; border:3px solid black; } #sub1{ width:200px; border:3px solid #ff0000; } #sub2{ width:300px; border:3px solid #ff0000; }

 

显示结果： 

这里是块1 ： 这里是块1的区域。

这里是块2 ： 这里是块2的区域。

 

 可以看出，div 的 块级框的style 默认情况好像是 clear:left ,float:left  的。

 

但是这样理解其实不好，

因为CSS定位机制是用三种方式实现的， 普通流， 浮动定位， 绝对/相对定位 。

上面这种其实就是 普通流定位， 元素框的位置由在HTML中的位置决定。