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

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

解决办法:

　　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. 自动配置/切换/查看JDK环境变量

    最近老是需要几个版本的JDK切换工作,于是网上收集资料整理,自己写了一个:自动配置/切换/查看JDK环境变量的批处理脚本.顺带3个JDK版本分别是:jdk1.6.0_43,jdk1.7.0_80,jd ...

  2. android读取xml

    /*** 从config.xml中获取版本信息以及应用id* * @param urlPath* @return* @throws Exception*/public List getUpdateIn ...

  3. iview 父组件动态传值给子组件

    父组件 <maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close=&quo ...

  4. JavaVM & JNIEnv

    JNIEnv提供了大多数的JNI函数.你的本地方法都会接收JNIEnv作为第一个参数.JNIEnv用于本地线程存储.因此,你不能在线程间共享同一个JNIEnv.如果一个代码段没有其他方式获取它自身线程 ...

  5. 5个用/不用GraphQL的理由

    我在如何使用Gatsby建立博客 / How to build a blog with Gatsby这篇文章中提过GraphQL在Gatsby中的应用.总的来讲,它是一个新潮的技术,在适宜的使用场景威 ...

  6. C3P0 详解

    定义: C3P0是一个开源的JDBC连接池,目前使用它的开源项目有Hibernate,Spring等. 数据库连接池的基本思想就是为数据库连接建立一个“缓冲池”.预先在缓冲池中放入一定数量的连接,当需 ...

  7. 使用自定义的tstring.h

    UNICODE   控制函数是否用宽字符版本_UNICODE 控制字符串是否用宽字符集 _T("") 根据上述定义来解释字符集 // 在tchar.h中 // tstring.h ...

  8. Oracle OLAP

    w 国产商业智能 BI 这 20 年(1997-2017)| 天善智能  http://mp.weixin.qq.com/s/VJURX2qhmL0Uj1dctMyEig 1997-2001年,萌芽阶 ...

  9. 三十五、robotframework中怎么将100转化成100.00

    1.将100转化成100.00

  10. PLSQL设置数据库选项

    1.将数据库安装目录下的"NETWORK"文件夹复制到client(客户端)安装目录下 : 2.修改"NETWORK"-->"ADMIN&quo ...