html不设置高度,html中div使用自动高度，即不设置height属性要注意的问题

转载：源文章

为什么要使用div标签

1.更多的配置项，那就意味着更灵活，当然，难度也更高；

2.可以方便的容纳其他html标签；

static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定;relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。absolute绝对定位，直接指定top，left，right，bottom。有意思 的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其 Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是 说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持。

可以用“流”的概念来理解div的position属性，一个html文档可以看成一棵树，relative和static是在流中的，讲究先后顺序，位置和父节点及前面的兄弟节点是相关的，而absolute和fixed不在流中，不讲先后顺序，只和父节点相关。

float属性

float指定了div的浮动模式，可取none|left|right，并使div丢失clear:both和display:block的样式，并使div不会向“自动高度”的父div索要位置，在下面自动高度里有讲到。

height属性

height指定里div的高度，如果指定里height属性，就算高度不够容纳所有子元素，也不会被撑开。

自动高度

未指定height属性时，div就会自动计算自己的高度。使用好div的自动高度，并不是一件很容易的事，我总结了一条原则：必须高到足够容纳最后一个向自己“索要”位置的子元素。一般子元素都认为会向div索要位置，但设置了float属性的div标签是不会的(这种情况经常遇到，更多的请读者自己积累)。

代码：

```

TEST DIV

TEST DIV

TEST DIV

TEST DIV

TEST DIV

```

效果：

可以看到，红色边框的div并没有被撑开。

下面我们加点代码：

TEST DIV

TEST DIV

TEST DIV

TEST DIV

TEST DIV

效果：

把红色的代码上移试试：

TEST DIV

TEST DIV

TEST DIV

TEST DIV

TEST DIV

效果：

现在，读者应该理解：必须高到足够容纳最后一个向自己“索要”位置的子元素的意义了。

如果父元素也设置float属性呢？代码：

TEST DIV

TEST DIV

TEST DIV

TEST DIV

TEST DIV

效果：

这下红框的div撑开了，但它把问题抛给了它的上级。

如果不想在每段代码的地方都加一个空的div，那就用css来解决吧，css代码：

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

html代码：

TEST DIV

TEST DIV

TEST DIV

TEST DIV

TEST DIV

效果也会撑开父div。就不贴图了。注意：某些windows系统下的某些版本可能并不支持通过css这样设置。