<!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>BFC</title>

      <style type="text/css">

          .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

          .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}

          .div3 {background-color: #95E1D3; width: 200px; height: 100px;}

     </style>

 </head>

 <body>

     <div class="div1">div1</div>

     <div class="div2">div2</div>

     <div class="div3">div3</div>

 </body>

 </html>

清除内部浮动

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

 <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>BFC清除内部浮动</title>

      <style type="text/css">

          .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;}

          .parent {width: 300px; border: 1px solid #95E1D3;}

      </style>

 </head>

 <body>

     <div class="parent">

         <div class="child"></div>

         <div class="child"></div>

     </div>

 </body>

 </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. mac eclipse中运行tomcat出现错误：-Djava.endorsed.dirs=D:\Tomcat 9.0\endorsed is not supported

    -Djava.endorsed.dirs=D:\Tomcat 9.0\endorsed is not supported. Endorsed standards and standalone APIs ...

  2. JIRA日期格式设置

    https://blog.csdn.net/zj911008/article/details/48312927?utm_source=blogxgwz3 https://blog.csdn.net/z ...

  3. 17Linux_mariadb_PXE+Kickstart

    Mariadb mariadb-client mariadb-server # yum groupinstall mariadb mariadb-client mariadb-server -y # ...

  4. 限时订单实现方案（DelayQueue、ActiveMq）

    原文链接:http://www.studyshare.cn/blog-front/blog/details/1132 一.在各种电商网站下订单后会保留一个时间段,时间段内未支付则自动将订单状态设置为已 ...

  5. 给centos 7添加硬盘空间

    前言 今天在安装ambari的时候,制作amberi本地yum源的时候出现了一个问题,虚拟机的磁盘空间不足了,后来发现是因为这个节点之前本来只打算作为数据节点使用的,后来所以后来只给它分配了20G的硬 ...

  6. K8s存储卷、pv和pvc的使用

    emptyDIR 临时目录 hostPath :使用主机的路径 网络存储: 传统的设备存储:NAS,SAN 分布式存储:glusterfs,rbd,cephfs 云存储:EBS,Azure,阿里云的 ...

  7. 解决laravel使用QQ邮箱发邮件失败

    在 laravel 中使用 QQ 发送邮件的时候莫名其妙的出现了如下错误:Connection could not be established with host smtp.exmail.qq.co ...

  8. python拼接字符串方法汇总

    python拼接字符串一般有以下几种方法: 1.直接通过(+)操作符拼接 s = 'Hello'+' '+'World'+'!' print(s) 输出结果:Hello World! 这种方式最常用. ...

  9. 微信小程序 app.json文件配置

    https://developers.weixin.qq.com/miniprogram/dev/index.html  起步 https://developers.weixin.qq.com/min ...

  10. Jmeter固定定时器（Constant Timer）

    如上图,Constant Timer是jmeter固定定时器元件 一般用来设置延时的,放在某个请求下,表示Constant Timer配置的指定时间后,再开始发起这个请求操作(单位:毫秒) 根据Con ...