您的位置：首页 > Web前端 > CSS

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

2013-06-21 21:42 666 查看

先贴一个常见的浮动代码父元素div设置背景色为灰色#f1f1f1，子元素div分别设置不同的颜色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>test1</title>

<style type="text/css">

#container {

background-color: #f1f1f1;

width: 80%;

margin: 20px auto;

}

.item {

float: left;

color: white;

text-shadow:0 1px black;

margin: 10px 20px;

padding: 20px;

}

#container > .item:nth-child(1) {

background-color: #F08080;

}

#container > .item:nth-child(2) {

background-color: #D8BFD8;

}

#container > .item:nth-child(3) {

background-color: #A2CD5A;

}

#container > .item:nth-child(4) {

background-color: #63B8FF;

}

</style>

</head>

<body>

<div id="container">

<div class="item">

I am No.1

</div>

<div class="item">

I am No.2

</div>

<div class="item">

I am No.3

</div>

<div class="item">

I am No.4

</div>

</div>

</body>

</html>

这个代码会生成如下的效果：

我们发现父元素根本没有高度（审查元素可以看出父元素div#container的高度=0）

分析：

浮动float属性会使得元素脱离当前HTML文档流，那么会使得：当前HTML文档会当作设置float属性的元素不存在一样。那么，由于这5个子元素都设置了float，所以可以看作父元素#container内根本没有内容，div在没内容的时候表现正好是高度=0.

解决方法：

1设置父元素float

例如：

#container {

background-color: #f1f1f1;

width: 80%;

margin: 20px auto;

float: right;

} 这样，父元素也是脱离当前文档流，子元素和父元素一起脱离，并且子元素仍在父元素内，父元素内容不空了，所以高度会适应子元素高度。

2在最后一个设置浮动的子元素后加一个空div ，并且让这个div清除浮动。

例如<div class="items"></div>

.items {clear: both;}

3父元素设置overflow:hidden;

4不要用浮动，而使用：子元素使用display:inline-table或者display:inline-block

上述这些办法得到的效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航