<!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. mysql-day1

    -- 数据库的操作 -- 链接数据库 mysql -uroot -p mysql -uroot -pmysql -- 退出数据库 exit/quit/ctrl+d -- sql语句最后需要有分号;结尾 ...

  2. 纠结了一下午的问题：运行opencv的HoughLinesP函数出错

    问题描述:检测出的直线数量显然不对,非常巨大.程序运行崩溃. 解决办法:在添加附加依赖项时,Dubug模式只添加opencv_world310d.lib,Release模式下只添加opencv_wor ...

  3. Vsftpd服务重启、暂停命令

    VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,它的全称是Very Secure FTP 从此名称可以看出来,编制者的初衷是代码的安全. 在使用Vsftp服务是经常需要启动.停 ...

  4. 如何配置mysql的超时时间

    http://bigdata.51cto.com/art/201710/555377.htm

  5. css note

    1.text-align规定了其子元素的对齐方式,当设置在子元素无效时,尝试设置在父元素,子元素可以水平居中: 2.vertical-align使用的前提,首先元素必须是display:inline ...

  6. selenium的browser.page_source无法返回页面内容

    selenium的browser.page_source无法返回页面内容 可能是编码的问题.. html= (browser.page_source).encode('GBK', 'ignore') ...

  7. 在create-react-app里使用ant design

    使用create-react-app创建的项目,要使用ant design. 1.首先进入项目根目录,yarn add antd. 2.在App.css引入 样式文件,@import '~antd/d ...

  8. Dapper查询返回Datatable

    dapper封装的扩展方法中,没有直接返回datatable的方法,项目中有些时候需要用到这样的返回格式,而为了项目数据框架的统一性, 不好直接用其他框架,如果直接将查询出来的泛型集合转datatab ...

  9. java课程之团队开发冲刺1.6

    一.总结昨天进度 1.依照视频学习了sqlite,但是由于视频的不完整性导致并不知道代码的实际效果怎么样. 二.遇到的问题 1.依据上一条,在date目录下date文件夹中,的确发现了数据库的文件,但 ...

  10. SpringCloud-day09-Feign与Hystrix整合

    8.5.Feign 与 Hystrix整合 服务熔断服务降级彻底解耦 前面的代码,用@HystrixCommand fallbackMethod是很不好的,因为和业务代码耦合度太高,不利于维护,所以需 ...