在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高.

但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷.由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱.

解决办法:

　　1.父元素设置overflow属性设置为hidden;

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .parent {
            background-color: #2aabd2;
            overflow: hidden;
        }

        .children {
            width: 100px;
            height: 100px;
            background-color: #8a6d3b;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>
</html>

　　2.给父元素设置:after伪类

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .parent {
            background-color: #2aabd2;
        }

        .parent:after {
            content: '';
            display: block;
            clear: both;
        }

        .children {
            width: 100px;
            height: 100px;
            background-color: #8a6d3b;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>
</html>

CSS高度坍塌原因及解决办法的更多相关文章

  1. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

  2. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  3. 各种编码问题产生原因以及解决办法---------响应编码，请求编码，URL编码

     响应编码 产生原因以及解决办法: 示例: package cn.yzu; import java.io.IOException; import javax.servlet.ServletExcept ...

  4. .Net内存泄露原因及解决办法

    .Net内存泄露原因及解决办法 1.    什么是.Net内存泄露 (1).NET 应用程序中的内存 您大概已经知道,.NET 应用程序中要使用多种类型的内存,包括:堆栈.非托管堆和托管堆.这里我们需 ...

  5. Oracle死锁产生的原因和解决办法

    如果有两个会话,每个会话都持有另一个会话想要的资源,此时就会发生死锁.用下面实验来说明死锁的产生原因和解决办法.SESSION1:SQL> create table t2 as select * ...

  6. HttpClient的CircularRedirectException异常原因及解决办法

    HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...

  7. php_curl.dll libssh2.dll 始终无法加载的原因 及解决办法

    在StackOverflow得到最终原因及解决办法 http://stackoverflow.com/questions/16424117/php-unable-to-load-php-curl-dl ...

  8. mysql保存中文乱码的原因和解决办法

    当你遇到这个mysql保存中文乱码问题的时候,期待找到mysql保存中文乱码的原因和解决办法这样一篇能解决问题的文章是多么激动人心.    也许30%的程序员会选择自己百度,结果发现网友已经贴了很多类 ...

  9. eclipse中tomcat发布失败（Could not delete May be locked by another process）原因及解决办法

    在eclipse中tomcat发布项目时,偶尔出现了以下情况: publishing to tomcat v7.0 services at localhost has encountered a pr ...

随机推荐

  1. 手写CSS+js实现radio单选按钮

    有的时候我们需要用长得漂亮一点的单选按钮,那么,就要抛弃原有的自己来写,下面就是我实现的 <div class="radio"><span class=" ...

  2. 进阶3： zookeeper-3.4.9.tar.gz和hbase-1.2.4-bin.tar.gz 环境搭建(hbase 伪分布式)

    前提条件: 成功安装了  jdk1.8,  hadoop2.7.3 注意条件: zookeeper,hbase 版本必须要和hadoop 安装版本相互兼容,否则容易出问题: 本次:安装包 zookee ...

  3. 运行job检验单元测试覆盖率

    http://ns.jenkins.baidu.com/user/anyixing/my-views/view/Map_ut/job/poi-zhunru/ 1在http://ns.jenkins.b ...

  4. Java数据结构与算法(4):二叉查找树

    一.二叉查找树定义 二叉树每个节点都不能有多于两个的儿子.二叉查找树是特殊的二叉树,对于树中的每个节点X,它的左子树中的所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项. 二叉查找树节点的 ...

  5. 纯css实现手机通讯录

    我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单,就是两个列表 <div class="con&qu ...

  6. 北风设计模式课程---接口分离原则（Interface Segregation Principle）

    北风设计模式课程---接口分离原则(Interface Segregation Principle) 一.总结 一句话总结: 接口分离原则描述为 "客户类不应被强迫依赖那些它们不需要的接口& ...

  7. C++新旧类型转换小记

    旧式类型转换可应对一切转换,不管合不合理,有没有风险,你让我转我就转给你,后果自负. 新式类型转换比较安全,主要体现在父子类之间的运行时转换 dynamic_cast上,若转换失败则返回空指针,而旧式 ...

  8. 【洛谷P1983 车站分级】

    这题好像是个蓝题.(不过也确实差不多QwQ)用到了拓扑排序的知识 我们看这些这车站,沿途停过的车站一定比未停的车站的级别高 所以,未停靠的车站向已经停靠的车站连一条边,入度为0的车站级别就看做1 然后 ...

  9. 使用@Value注解对bean进行属性注入

    使用@Value注解,可以有三种属性注入的方式: 1. 使用字面量注入 2. 使用EL表达式注入 3. 使用占位符注入 import org.springframework.beans.factory ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_1_递归概念&分类&注意事项

    a方法里面调用自己,但是没有停止的条件 方法没有停止的条件. 栈内存溢出的异常. 只有栈,没有堆内存 先执行main方法压栈执行 main方法里面调用a方法.a方法就会压栈 改成20000