1.  <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.       <meta charset="UTF-8">
  5.       <title>BFC</title>
  6.       <style type="text/css">
  7.           .div1 {background-color: #FCE38A; width: 200px; height: 100px;}
  8.           .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}
  9.           .div3 {background-color: #95E1D3; width: 200px; height: 100px;}
  10.      </style>
  11.  </head>
  12.  
  13.  <body>
  14.      <div class="div1">div1</div>
  15.      <div class="div2">div2</div>
  16.      <div class="div3">div3</div>
  17.  </body>
  18.  </html>

清除内部浮动

当一个标准流中的盒子中所有的子元素都进行了浮动，并且没有给盒子设置高度时，那么这个盒子的整个高度就会塌陷，什么意思呢，看下面的例子。

  1.  <!DOCTYPE html>
  2.   <html lang="en">
  3.   <head>
  4.       <meta charset="UTF-8">
  5.       <title>BFC清除内部浮动</title>
  6.       <style type="text/css">
  7.           .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;}
  8.           .parent {width: 300px; border: 1px solid #95E1D3;}
  9.       </style>
  10.  </head>
  11.  <body>
  12.      <div class="parent">
  13.          <div class="child"></div>
  14.          <div class="child"></div>
  15.      </div>
  16.  </body>
  17.  </html>

父集的被两个子div撑起来了，现在给child添加浮动

这个时候，父容器变成了2条重合的线了，也就是高度变为0了，即所说的高度塌陷。这是因为parent在计算高度时，parent内部的浮动元素child也会参与计算。

我们将父集浮动起来，

可以看出浮动父集元素解决了高度塌陷的问题。

css关于浮动的高度塌陷的更多相关文章

  1. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  2. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  3. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  4. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  5. html高度塌陷问题解决

    高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠    开启BFC的元素不会被浮动元素所覆盖    开启BFC的元素可以包含浮动的子元素 如何开启 ...

  6. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  7. CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

    CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; p ...

  8. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. CSS高度塌陷

    问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...

随机推荐

  1. SSM的搭建

    1.首先是工具的准备. eclipse jdk1.7 maven 3.5.4 tomcat 8.5 2.工具环境的搭建 首先,new建立选择maven project工程,勾选simple proje ...

  2. 201772020113 李清华《面向对象程序设计（java）》第16周学习总结

    1.实验目的与要求 (1) 掌握线程概念: (2) 掌握线程创建的两种技术: (3) 理解和掌握线程的优先级属性及调度方法: (4) 掌握线程同步的概念及实现技术: 2.实验内容和步骤 实验1:测试程 ...

  3. JAVA的第二次作业

    1.编写“人”类及其测试类.1.1 “人”类: 类名:Person 属性:姓名.性别.年龄.身份证号码 方法:在控制台输出各个信息1.2 测试类 类名:TestPerson 方法:main ...

  4. Hadoop Java API操作HDFS文件系统（Mac）

    1.下载Hadoop的压缩包 tar.gz   https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/stable/ 2.关联jar包 在 ...

  5. node note

    1.关于next() next()函数接受一个Error对象,在判断错误时,返回这个next()函数,并传入自定义的Error对象可以被向下捕捉,你也可以自定义统一捕捉错误Error的中间件,在app ...

  6. 关于js-angularJS的路由传参

    使用angular进行网页跳转传参 app.controller('payController', function ($scope, $location, payService) { 注明$loca ...

  7. ACM-ICPC 2018 南京赛区网络预赛 J.sum

    A square-free integer is an integer which is indivisible by any square number except 11. For example ...

  8. Java框架spring 学习笔记（二）：Bean的作用域

    Spring 框架Bean支持以下五个作用域: 下面介绍两种作用域,singleton和protoype singleton作用域 singleton作用域为默认作用域,在同一个ioc容器内getBe ...

  9. 理解java的三大特性之封装

    参考大神的理解,详情见https://blog.csdn.net/chenssy/article/details/12757911

  10. tensorflow源码阅读（c++)（一）

    root/tensorflow/core |--common_runtime # 公共运行库 |--distributed_runtime # 分布式执行模块,含有grpc session, grpc ...