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

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

解决办法:

　　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. HDU 3613 Best Reward ( 拓展KMP求回文串 || Manacher )

    题意 : 给个字符串S,要把S分成两段T1,T2,每个字母都有一个对应的价值,如果T1,T2是回文串,那么他们就会有一个价值,这个价值是这个串的所有字母价值之和,如果不是回文串,那么这串价值就为0.问 ...

  2. Java——容器（List）

    [List接口]  

  3. 七牛云对象存储kodo使用体验

    在这里,我使用了七牛云的对象存储Kodo,和阿里云的OSS,还有腾讯云的COS是同样的产品 oss相关术语 包依赖关系解决 unrecognized import path "golang. ...

  4. 【PowerOJ1752&网络流24题】运输问题（费用流）

    题意: 思路: [问题分析] 费用流问题. [建模方法] 把所有仓库看做二分图中顶点Xi,所有零售商店看做二分图中顶点Yi,建立附加源S汇T. 1.从S向每个Xi连一条容量为仓库中货物数量ai,费用为 ...

  5. 记录redis 存放JSON字符串,在并发操作时读-改-写问题

    问题描述: 这里涉及到的问题其实就是普遍的读-改-写,redis可以保证每个操作的原子性,但是无法保证多个操作的原子性,解决的方法可以使用redis提供的multi和watch命令,具体使用如下:1. ...

  6. AGC030F - Permutation and Minimum

    https://atcoder.jp/contests/agc030/tasks/agc030_f 题解 我们先把这个排列从\(1 \sim 2n\)表达出来,然后题面中的每一对数我们可以用一条线把他 ...

  7. 解决：@Auarowired为null

    使用@Auarowired时程序报空指针.如图: 将private 更改为 public 即可

  8. JavaScript export

    export The export statement is used when creating JavaScript modules to export functions, objects, o ...

  9. 微信小程序 button 组件

    button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...

  10. 获取oracle数据库对象定义

    在oracle中,使用DBMS_METADATA包中的GET_DDL函数来获得对应对象的定义语句.GET_DDL函数的定义如下: DBMS_METADATA.GET_DDL ( object_type ...