CSS高度坍塌问题的原因以及解决办法

时间：2023-02-15 22:51:40

原因:

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            border: 1px solid;

        }

        .c1,.c2 {

            width: 100px;

            height: 100px;

            float: left;

        }

        .c1 {

            background: red;

        }

        .c2 {

            background: blue;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="c1"></div>

        <div class="c2"></div>

    </div>

</body>

</html>

　　

CSS高度坍塌问题的原因以及解决办法

解决办法:

1、给父元素一个固定高度,但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以此方法适用于子元素高度已知并且固定的情况,是不推荐使用的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            border: 1px solid;

            height: 200px;

        }

        .c1,.c2 {

            width: 100px;

            height: 100px;

            float: left;

        }

        .c1 {

            background: red;

        }

        .c2 {

            background: blue;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="c1"></div>

        <div class="c2"></div>

    </div>

</body>

</html>

　　

CSS高度坍塌问题的原因以及解决办法

2、在父元素最后添加一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            border: 1px solid;

        }

        .c1,.c2 {

            width: 100px;

            height: 100px;

            float: left;

        }

        .c1 {

            background: red;

        }

        .c2 {

            background: blue;

        }

        .clear {clear: left;}

    </style>

</head>

<body>

    <div class="box">

        <div class="c1"></div>

        <div class="c2"></div>

        <div class="clear"></div>

    </div>

</body>

</html>

　　

CSS高度坍塌问题的原因以及解决办法

3、给父元素添加 overflow：hidden；这是开发中最应用最多的一种做法。

这个属性和值是当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉。
当子元素浮动时，给父元素添加overflow：hidden，按照它的本身特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            border: 1px solid;

            overflow: hidden;

        }

        .c1,.c2 {

            width: 100px;

            height: 100px;

            float: left;

        }

        .c1 {

            background: red;

        }

        .c2 {

            background: blue;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="c1"></div>

        <div class="c2"></div>

    </div>

</body>

</html>

　　

CSS高度坍塌问题的原因以及解决办法

4、通过伪元素选择器::after清除浮动,缺点代码过多。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box {

            border: 1px solid;

        }

        .c1,.c2 {

            width: 100px;

            height: 100px;

            float: left;

        }

        .c1 {

            background: red;

        }

        .c2 {

            background: blue;

        }

        .box::after {

            content: "";

            display: block;

            clear: left;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="c1"></div>

        <div class="c2"></div>

    </div>

</body>

</html>

　　

CSS高度坍塌问题的原因以及解决办法

总结:推荐使用第三种解决方案,代码量和带来的影响最小。

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. &period;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&lowbar;curl&period;dll libssh2&period;dll 始终无法加载的原因 及解决办法

    在*得到最终原因及解决办法 http://*.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. rpc框架之 thrift连接池实现

    接前一篇rpc框架之HA/负载均衡构架设计 继续,写了一个简单的thrift 连接池: 先做点准备工作: package yjmyzz; public class ServerInfo { publi ...

  2. 如何很好的Review自己的代码

    写这篇博文的原因是因为自己写的代码经常会因为返工,delay项目的交付日期.总结了一下引起项目delay的原因,大概有如下几点: 在没有完全深熟悉需求交互细节的情况下:诸如根据不同渠道设置不同的订单状 ...

  3. 用C&num;抓取AJAX页面的内容

    现在的网页有相当一部分是采用了AJAX技术,不管是采用C#中的WebClient还是HttpRequest都得不到正确的结果,因为这些脚本是在服务器发送完毕后才执行的! 但我们用IE浏览页面时是正常的 ...

  4. 关闭ehcache的更新检查UpdateChecker

    ehcache默认开启自动更新检查,在你不能联网的环境下,会有异常出现. 在ehcache的配置文件中ehcache标签上加上属性updateCheck="false" 即可.

  5. SqlSugar-执行Sql语句查询实例

    使用SqlSugar执行sql语句 1.简单查询 SqlSugarClient db = SugarContext.GetInstance(); //执行sql语句,处理 //1.执行sql,转成li ...

  6. uva 1374 快速幂计算

    #include <iostream> #include <cstdio> #include <cmath> #include <cstring> #i ...

  7. href&equals;&quot&semi;&num;&quot&semi; 的坑

    第一次发博客, 也不讲究样式. 只是单纯的说一下踩过的坑,方便后人避坑吧 之前做项目的时候,碰到一个非常奇葩的问题. 就是在jqgrid中写了了一个简单的方法 {name:'已经存在的列名称', la ...

  8. Canvas绘制五角星

    from tkinter import * import math as m root = Tk() w = Canvas(root, width=200, height=100, backgroun ...

  9. MQTT简单介绍与实现

    1. MQTT 介绍它是一种 机器之间通讯 machine-to-machine (M2M).物联网 Internet of Things (IoT)常用的一种轻量级消息传输协议适用于网络带宽较低的场 ...

  10. Python基础【day02】：字符串（四）

    在Python中字符串本身有带很多操作,字符串的特性,不可以被修改 0.字符串常用功能汇总 1.字符串的定义 #定义空字符串>>> name=''#定义非空字符串 >>& ...

相关文章