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

时间 2019-11-18

标签 css 关于元素设置 float 属性后父高度解释解决方法栏目 CSS 繁體版

原文原文链接

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

<!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>
html

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

咱们发现父元素根本没有高度（审查元素能够看出父元素div#container的高度=0）spa

分析：htm

浮动float属性会使得元素脱离当前HTML文档流，那么会使得：当前HTML文档会看成设置float属性的元素不存在同样。那么，因为这5个子元素都设置了float，因此能够看做父元素#container内根本没有内容，div在没内容的时候表现正好是高度=0.文档

解决方法：it

1设置父元素floattable

例如：class

#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
float: right;
} 这样，父元素也是脱离当前文档流，子元素和父元素一块儿脱离，而且子元素仍在父元素内，父元素内容不空了，因此高度会适应子元素高度。
test

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

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

.items {clear: both;}

3父元素设置overflow:hidden;

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

上述这些办法获得的效果以下：