<!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. Javascript Ajax总结——跨域资源共享

    XHR对象只能访问与包含它的页面位于同一个中的资源.这种安全策略可以预防某些恶意行为.CORS(Cross-Origin Resource Sharing,跨域资源共享)是W3C的一个工作草案,定义了 ...

  2. PersistenceException、ReflectionException、IllegalArgumentException、wrapException持久性异常 反射异常 非法参数异常 包装异常

    PersistenceException.ReflectionException.IllegalArgumentException.wrapException wrapException 持久性异常 ...

  3. 快速上手 dbt 数据转换工具 -- dbt core 命令进阶篇

    引 根据第一篇文章的约定,我想通过接下来的几篇文章带大家进一步了解 dbt 的用法,原计划这篇文章我会介绍 dbt 命令的进阶用法,进一步认识 dbt 的配置以及如何创建增量表等等零零散散十几个方面的 ...

  4. 云图说丨初识华为云DDoS防护AAD——DDoS攻击防护平台

    DDoS攻击是指分布式拒绝服务,是一种网络攻击手法. 本文分享自华为云社区<[云图说]第297期 初识华为云DDoS防护AAD--DDoS攻击防护平台>,作者:阅识风云. DDoS攻击是指 ...

  5. 详解驱动开发中内核PE结构VA与FOA转换

    摘要:本文将探索内核中解析PE文件的相关内容. 本文分享自华为云社区<驱动开发:内核PE结构VA与FOA转换>,作者: LyShark . 本章将探索内核中解析PE文件的相关内容,PE文件 ...

  6. 想学AI开发很简单：只要你会复制粘贴

    摘要:本次实践基于 mobilenetV2 实现猫狗图像分类,贯穿了数据集获取及处理.预训练模型微调及迁移.端侧部署及推理等环节和知识点,体会到了 MindSpore 简单的开发体验和全场景快速部署的 ...

  7. 云图说丨DDoS防护解决方案：DDoS大流量攻击防得住

    摘要:华为云安全服务打造DDoS防护解决方案,助您防患于未然,筑牢业务安全防线. 本文分享自华为云社区<[云图说]第255期 DDoS防护解决方案:DDoS大流量攻击防得住>,作者:阅识风 ...

  8. 开心档之Java 测验

    目录 Java 测验 Java 测验 Java 测验技术文档 Java测验是一种衡量Java编程水平的测试,可以通过一系列问题和编程任务来测试Java开发人员的技能水平和理解程度.Java测验可以用于 ...

  9. 火山引擎A/B测试：MAB智能调优实验，企业活动效果提升新利器

      618临近,各大电商APP的预热活动已然拉开序幕.对企业而言,一场活动从策划到上线,中间经过效果验证,其业务成本很高.一个好的活动创意从策划.开发.到最终发布,至少会经历几周实践,如果中间还经历A ...

  10. Solon Cloud 2.2.10 架构图发布

    Solon Cloud 是在 Solon 的基础上构建的微服务开发套件.以标准与规范为核心,构建丰富的开放生态.为微服务开发提供了一个通用防腐层(即不用改代码,切换配置即可更换组件). 本次发布,展示 ...