<!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. 神经网络优化篇：详解梯度的数值逼近（Numerical approximation of gradients）

    在实施backprop时,有一个测试叫做梯度检验,它的作用是确保backprop正确实施.因为有时候,虽然写下了这些方程式,却不能100%确定,执行backprop的所有细节都是正确的.为了逐渐实现梯 ...

  2. Python——Html（表格<table>, <tr>,<td>,<th>、表单<form>、自定义标签<div>和<span>）

    一.表格<table>, <tr>,<td>或<th> <table> 元素是 HTML 中用于创建表格的主要标记.表格是一种用于展示数据的 ...

  3. 6.elasticsearch中search template和alias

    什么是search template 顾名思义,查询模版,就是提前设定好查询的DSL,再次查询时,只需要指定对应的模版,然后传入相应的参数就好.一是可以每次不用构建复杂的DSL,二是可以供开发直接使用 ...

  4. Pikachu漏洞靶场 ../../（目录遍历）

    目录遍历 概述 在web功能设计中,很多时候我们会要将需要访问的文件定义成变量,从而让前端的功能便的更加灵活.当用户发起一个前端的请求时,便会将请求的这个文件的值(比如文件名称)传递到后台,后台再执行 ...

  5. ASCII编码：计算机文本通信的基石

    ASCII(美国信息交换标准代码)编码是一种将字符与数字相互映射的编码系统,它为现代计算机文本通信奠定了基础.本文将从多个方面介绍ASCII编码的原理.发展历程.应用及其在现实场景中的优势,帮助您深入 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt （53）-- 算法导论6.2 5题

    五.MAX-HEAPIFY的代码效率较高,但第 10 行中的递归调用可能例外,它可能使某些编译器产生低效的代码.请用循环控制结构取代递归,重写 MAX-HEAPIFY代码. 文心一言: 以下是使用循环 ...

  7. C++中自定义结构体或类作为关联容器的键

    目录 1. 概述 2. 实例 1. 概述 STL中像set和map这样的容器是通过红黑树来实现的,插入到容器中的对象是顺序存放的,采用这样的方式是非常便于查找的,查找效率能够达到O(log n).所以 ...

  8. 教你如何在Python中读，写和解析CSV文

    摘要:在这篇文章中关于"在Python如何阅读CSV文件"中,我们将学习如何读,写和解析的CSV文件的Python. 您知道将表格数据存储到纯文本文件背后的机制是什么吗?答案是CS ...

  9. DevUI开源经验分享：从0到1开始运营你的开源项目

    摘要:DevUI是面向企业中后台产品的开源前端解决方案,于2019年6月正式在GitHub开源,从当时的无人问津到去年8月累计1000 Star,再到现如今上千名社区成员.上百位贡献者.达成了3000 ...

  10. MRS +Apache Zeppelin，让数据分析更便捷

    摘要:选择轻量化.免运维.低成本的大数据云服务是业界趋势,如果搭建Zeppelin再同步自建一套Hadoop生态成本太高!因此我们通过结合华为云MRS服务构建数据中台. 本文分享自华为云社区<M ...