<!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: #F00080;

 }

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

 background-color: #D8AAD8;

 }

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

 background-color: #A2aa5A;

 }

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

 background-color: #63B8FF;

 }

 </style>

</head>

<body>

<div id="container">

 <div class="item">

 No.1

 </div>

 <div class="item">

 No.2

 </div>

 <div class="item">

 No.3

 </div>

 <div class="item">

 INo.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: left;

 }

2、在最后一个设置浮动的子元素后加一个空div ，并且让这个div清除浮动。  可以不用对父级设置高度 也无需技术父级高度，方便适用，但会多加CSS和HTML标签。

例如：

 <div class="clear"></div>

 .clear {clear: both;}

3、父元素设置overflow:hidden;或overflow:auto;。  因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

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

5、使用CSS的:after伪元素

after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.clearfix:after{

   content: " ";

   display: block;

   height: 0;

   clear: both;

   visibility: hidden;

 } 

 <div id="container" class="clearfix"></div>

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

  1. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  2. 为什么子元素设置margin-top会作用在父元素上？

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  4. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

  5. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

  6. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  7. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  8. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  9. 子元素增加margin-top会增加给父元素的问题

    假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...

随机推荐

  1. 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别

    链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别   大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...

  2. Navicat Premium相关注册码

    --Navicat for SQL Server V10.0.10NAVD-3CG2-6KRN-IEPMNAVL-NIGY-6MYY-XWQENAVI-C3UU-AAGI-57FW --Navicat ...

  3. win7 64位 asp+access 数据库连接出错[代码：02]，请检查数据库链接文件中的连接字串

    解决办法,启用32位应用程序改为true 打开“Internet 信息服务(IIS)管理器”,在最右边的窗口中点击“应用程序池”,在用到的应用程序池上点击右键,选择“高级设置”

  4. eclipse中Maven创建WEB项目

    刚刚学到Maven的时候总是容易忽视到一些创建Maven项目是的步骤, 这里记录笔者熟悉一种,直接创建Maven Project 下面开始吧--- 选择web-app,没得说,然后那些groupID ...

  5. 3.MongoDB下Windows下的安装

    由于博主目前使用的是Windows的系统,没有使用Linux等其它的系统,因此此安装配置和开发使用,均是在Windows下进行的,以后在使用其它的系统的时候,再将其它系统的配置的使用补充上来. 1.下 ...

  6. mysqldump导出

    mysqldump -u user -p dbname table1 table2 > db.sql mysql执行sql mysql –uroot –p -Dtest < 1.sql

  7. MySql SELECT INTO 记录为空的问题

    SELECT Id INTO @Id FROM GiftCode WHERE Status = 1 AND GiftId = #GiftId# ORDER BY Id ASC LIMIT 1;     ...

  8. Azure Web Site 之 利用Azure Web site 发布网站

    由于经常混迹于MSDN Azure论坛,少不了和一些外国朋友打交道.有的时候觉得还是有一些东西可以写出来与外国友人们分享下的, 所以就用一个开源项目建了一个英文blog项目. 在发布的时候,首选的就是 ...

  9. jQuery使用serialize()表单序列化时出现中文乱码问题&js获取url中的参数,并保证获取到的参数不乱码

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 原因:.serialize()自动调用了encodeURIComp ...

  10. ajax动态添加的li不能绑定click事件

    单纯的给li标签添加click事件,是不会执行的. 经过试验 <ul id="searchedUser"><li>搜索结果</li></u ...