<!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. Hihocoder 1079 离散化

    离散化这里有很多种方式 利用结构体记录最初的索引在按位置排序再记录排名即为离散的位置再按索引排回来 或者用数组记录排序后直接对原位置二分直接去找离散应在的位置 或者对数组排序后直接map 3 20 1 ...

  2. WPF 札记

    今天在工程中发现了一个非常消耗CPU资源的过程---一个创建Popup并根据绑定的Collection填充ListBox的过程. 通过VS的性能诊断,最终确定的耗时过程锁定在了Popup.isOpen ...

  3. debian的版本演进

    debian有三个发行版本,stable版.testing版和unstable版. 其中,unstable版本是开发者正在开发的版本,它里面保存着debian的开发者当前的工作.这个版本是不断在被更新 ...

  4. [整理]Centos6.5 + hadoop2.6.4环境搭建

    搭建Hadoop集群环境(3台机器) 1 准备环境 1.1 安装系统,并配置网络使3台机器互联互通,且SSH可直连(无需密码.保存私钥) 1.1.1 安装系统 安装Centos 6.5系统 安装过程略 ...

  5. Foundation框架

    1.框架是由许多类.方法.函数.文档按照一定的逻辑组织起来的集合,以便使研发程序变的更容易 清除缓存,删除这个文件夹下的所有文件/Users/fanyafang/Library/Developer/X ...

  6. 二十七、JDK1.5新特性---Annotation

    上篇文章介绍了反射的一些基础知识以及应用案例,本文将介绍jdk 1.5 出现的新特性——Annotation也就是我们所说的注解,即使用注释的方式加入一些程序的信息. 注解相当于一种标记,在程序中加了 ...

  7. 中文乱码~Windows 7

    1.安装匹配的中文语言包 2.安装中文字体

  8. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Linq创建带命名空间、前缀、Soap格式的XML

    关于XML,我也是刚接触,关于一般常见的XML,博客园.CSDN上的资料很多,对于不常见的带命名空间.前缀.Soap格式的XML的描述相对来说寥寥无几,上一篇我写到了对相对复杂的XML的读操作,下面说 ...

  10. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...