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

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

解决办法:

　　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. Win10 设置系统时间

  2. React Native 之组件的定义

    App.js 也可以认为是一个组件,那么此文件中能定义多个组件吗? 方式一 import Hello from './Hello' export default class App extends C ...

  3. codeforces 868C - Qualification Rounds（构造）

    原题链接:http://codeforces.com/problemset/problem/868/C 题意:有k个队伍参加比赛,比赛有n个预选的题目,有些队伍对已经事先知道了一些题目.问能不能选出若 ...

  4. vue-cli3取消eslint

    遇到这样的空白报错问题,删除这行代码就行

  5. #1122 JSP动作元素

    JSP动作元素 与JSP指令元素不同的是,JSP动作元素在请求处理阶段起作用.JSP动作元素是用XML语法写成的. 利用JSP动作可以动态地插入文件.重用JavaBean组件.把用户重定向到另外的页面 ...

  6. shell中的=~的简单用法

    其中 ~ 其实是对后面的正则表达式表示匹配的意思,如果匹配就输出1, 不匹配就输出0 [[ $test =~ ^[0-9]+ ]] && echo 1 || echo 0

  7. python 调用C++ DLL,传递int,char,char*，数组和多维数组

    ctypes 数据类型和 C数据类型 对照表 ctypes type C type Python type c_bool _Bool bool (1) c_char char 1-character ...

  8. a daemon 守护进程

    w Cron and Crontab usage and exampleshttps://www.pantz.org/software/cron/croninfo.html

  9. 设置bios加快系统的启动

    设置bios加快系统的启动 bois的设置错误, 还会引起系统的工作不正常 bios设置正确合理, 关系到系统的高效运行: 一般, 应该将bios中, 系统的各个cache 缓存开启,如cpu缓存, ...

  10. EF6中一个关于时间类型 datetime2 的坑

    在一个访问下位机的程序中,返回的时间戳有时候因断线产生0001年01月01日的时间,而原先使用拼接SQL进行数据存储的操作时,这个问题是可以跳过的. 这次把拼接SQL的部分重新改为EF进行管理,这个坑 ...