<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

  <meta charset="utf-8">

  <title>正确解决高度塌陷</title>

  <style media="screen">

    .box {

      border: 1px solid;

    }

    .float {

      width: 100px;

      height: 100px;

      background: skyblue;

      float: left;

    }

    .clearfix:after {

      content:'';

      clear: both;

      display:block;

    }

  </style>

</head>

<body>

  <div class="box clearfix">

    <div class="float">

    </div>

  </div>

</body>

</html>

补充：

一， float 使父元素高度坍塌的原因 ：

子元素使用 float 后，使其脱离文档流 。 使父元素检测不到其尺寸。

二，5种解决方案 ：

1，为父元素设置高度 ， 缺陷是 ：不灵活

2，为父元素设置 float ,   缺陷是 ：使父元素也脱离，没有真正解决

3，为父元素设置 overflow:hidden ， 缺陷是 ：会隐藏相关的元素

4，子元素后面添加 一个 clear:both 的 兄弟元素 ， 缺陷是 ： 使 html 添加了一个多余的结构

5，为父元素添加一个 content:"";clear:both;display:block 的伪类 。 （ 可取 ）

CSS - 正确解决 float 高度坍塌的问题的更多相关文章

  1. 前端学习 -- Css -- 高度坍塌问题的产生以及解决

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...

  2. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  3. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  4. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  5. atitit.dw不能显示正确的百分比高度in dw的解决

    atitit.dw不能显示正确的百分比高度in dw的解决 div 设置35%的高度,三,不能正确的显示高度...环境dw cs6 但是设置161px奏能ok了...表明这个是dw的一个bug... ...

  6. 浮动产生的高度坍塌解决方法以及使用siblings()方法获取同级元素

    高度坍塌:如果一个没有设置高度div里的元素都是浮动元素,这个时候就可能产生高度坍塌,因为div的高度都是普通元素撑起来的,div里的元素浮动之后,元素就会脱离文档流,所以父级的div高度就可能为零, ...

  7. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  8. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  9. 浅谈CSS高度坍塌

    高度坍塌情况: 当父元素没有设置高度,且子元素块都向左(右)浮动起来,那么父元素就会出现坍塌的现象. 解决办法: 在父元素包含块中加一个div: 优点:兼容性强,适合初学者. 缺点:不利于优化. 方法 ...

  10. CSS浮动（Float）（二）

    1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来 ...

随机推荐

  1. Python——第一章：占位——pass

    pass: 常用于代码占位 a = 10 if a > 100: pass 当设计代码时,有些条件或代码还没有想好要如何处理,先用pass做占位,后续可以回来继续写.如果不写pass则会报错,因 ...

  2. 2023-05-14：你的赛车可以从位置 0 开始，并且速度为 +1 ，在一条无限长的数轴上行驶， 赛车也可以向负方向行驶， 赛车可以按照由加速指令 ‘A‘ 和倒车指令 ‘R‘ 组成的指令序列自动行驶

    2023-05-14:你的赛车可以从位置 0 开始,并且速度为 +1 ,在一条无限长的数轴上行驶, 赛车也可以向负方向行驶, 赛车可以按照由加速指令 'A' 和倒车指令 'R' 组成的指令序列自动行驶 ...

  3. 如何在iPhone设备中查看崩溃日志

    ​ ​如何在iPhone设备中查看崩溃日志 目录 如何在iPhone设备中查看崩溃日志 摘要 引言 导致iPhone设备崩溃的主要原因是什么? 使用克魔助手查看iPhone设备中的崩溃日志 奔溃日志分 ...

  4. 买家手册：企业在选择 SBOM 供应商时需要注意什么？

    Apache Log4j 和 Log4Shell 两大事件的发生,将软件物料清单(Software Bill of Materials, SBOM)推向安全防护前沿,成为企业保护其软件供应链的方式之一 ...

  5. 聚焦企业数据生命周期全链路 火山引擎数智平台 VeDI 发布《数据智能知识图谱》

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎数智平台(VeDI)正式发布<数据智能知识图谱>(以下简称「图谱」),内容覆盖了包括数据 ...

  6. ThreadLocal 本地线程变量详解

    概述 ThreadLocal 意为本地线程变量,即该变量只属于当前线程,对其他线程隔离 我们知道,一个普通变量如果被多线程访问会存在存在线程安全问题,这时我们可以使用 Synchronize 来保证该 ...

  7. 我“采访”了 ChatGPT

    我"采访"了 ChatGPT 大家好,我是准备认真码字的**老章:. 最近ChatGPT火的爆表,看了很多相关文章,特别焦虑,唯恐自己的进步赶不上 AI 的发展. 还有就是我非常看 ...

  8. 【源码系列#06】Vue3 Diff算法

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核推荐 欢迎各位ITer关注点赞收藏 Vue2 Diff算法可以参考此篇文章[Vue2.x源码系列08]Di ...

  9. 分享几个常用的运维 shell 脚本

    今天咸鱼给大家分享几个不错的 Linux 运维脚本,这些脚本中大量使用了 Linux 的文本三剑客: 1. awk 2. grep 3. sed 建议大家这三个工具都要了解并最好能够较为熟练的使用 根 ...

  10. pikachu靶场

    pikachu靶场 基于表单暴力破解 看一下界面,有两个输入框,使用暴力破解使用Cluster bomb 前提须知是 Sinper 对$$符号标记的数据进行逐个替换 Battering ram 对$$ ...