CSS中父div与子div——子div有内容，父div高度却为0？-CFANZ编程社区

CSS中父div与子div——子div有内容，父div高度却为0？

CSS中父div与子div——子div有内容，父div高度却为0？_父div高度为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML与CSS简单页面效果实例</title>
</head>
<body>
    <div style="width:300px;background:#ccc;">
        <div style="width:100px;height:100px;float:left;background:Green;"></div>
        <div style="width:100px;height:100px;float:right;background:Red;"></div>
    </div>

    <!--<div style="width: 200px;height:200px;background-color: rosybrown">-->

    </div>
</body>
</html>

（参考： http://www.jb51.net/css/74450.html

参考网址中说到这样一句话： 当一个元素只包含浮动元素的时候，它会出现高度折叠(在火狐中是这样，IE9不会),即元素的上下底边重合，和高度为0效果一样。

1 给包含元素设置高度height

2 利用overflow属性

3 添加一个空的div

4 利用伪元素:after

详细讲解可以查看原文——> http://www.jb51.net/css/74450.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML与CSS简单页面效果实例</title>
    <link rel="stylesheet" type="text/css" href="HTMLAndCSS.css">
</head>
<body>
    <div style="width:300px;background:#ccc;">
        <div style="width:100px;height:100px;float:left;background:Green;"></div>
        <div style="width:100px;height:100px;float:right;background:Red;"></div>
    </div>

    <div style="width: 200px;height:200px;background-color: rosybrown">

    </div>
</body>
</html>

运行结果如下：

CSS中父div与子div——子div有内容，父div高度却为0？_清除浮动_02

那在父div的css样式中使用 overflow: hidden后呢？（使用 overflow: hidden 清除浮动——> 参考：CSS 的overflow:hidden 属性详细解释、给我详细讲解一下overflow:hidden的用法？）

CSS中父div与子div——子div有内容，父div高度却为0？_CSS_03

CSS中父div与子div——子div有内容，父div高度却为0？_overflow属性_04

0 条评论