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

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

解决办法:

　　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. 【bzoj3676】[Apio2014]回文串

    *题目描述: 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最大出现值. *输入: 输入只有一行,为一个只包含小 ...

  2. JavaSE——柏羲

    MySql Redis源码分析呢?

  3. 3D Computer Grapihcs Using OpenGL - 03 OpenGL Buffer Data

    本节绘制一个三角形,并讲解Buffer Object-缓冲对象 OpenGL的窗口坐标 屏幕中心为坐标原点,横向朝右为x正方向,纵向朝上为y正方向,最大值最小值分别为1,-1. Buffer Obje ...

  4. 原生javascript代码懒加载

    1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz- ...

  5. WCF - Hosting WCF Service 四种托管方式

    https://www.tutorialspoint.com/wcf/wcf_hosting_service.htm After creating a WCF service, the next st ...

  6. Markdown Memo(memorandum)

    居中 html语法 <center>居中</center> 左对齐 <p align="left">左对齐</p> 右对齐 < ...

  7. H5 刮图-刮一刮

    <!DOCTYPE html><html><head><style>*{margin:0;padding:0} </style></h ...

  8. （一）Maven之使用入门

    目录 今天是端午节哦,昨天大学同学举个了会.鱼头泡饼贼拉香,嗯哼,有点跑题了:之后去了同学家里坐了坐:发现同我有一样的书,即:<maven实战>:记得是从二手网店淘到的,已经买了有小半年, ...

  9. 007-elasticsearch5.4.3【一】概述、Elasticsearch 访问方式、Elasticsearch 面向文档、常用概念

    一.概述 Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Elasticsearch 也是使用 Java 编写的,它的内部使用 L ...

  10. MySQL使用命令导出/导入数据

    导出数据库文件 常用命令 mysqldump -uroot -pMyPassword databaseName tableName1 tableName2 > /home/foo.sql mys ...