<!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. ajax请求中包含中文参数

    对需要传递的中文参数先进行两次转码: 1.js文件中使用encodeURI()方法. var url = "Validate.jsp?id=" + encodeURI(encode ...

  2. Python学习笔记---数 数据类型 运算

    python的四种数类型: 整数 int 浮点型 float 布尔 boolen 复数 complex >>> type(5)<class 'int'>>>& ...

  3. Matplotlib-画图种类

    Scatter 散点图 本节我们将讲述各种不同的plot的方式.之前我们讲到了如何plot线,今天我们讲述如何plot散点图. # 首先,先引入matplotlib.pyplot简写作plt,再引入模 ...

  4. Json.Net(Newtonsoft)系列教程 4.Linq To JSON

    转自:https://www.cnblogs.com/sczmzx/p/7813834.html   一.Linq to JSON是用来干什么的? Linq to JSON是用来操作JSON对象的.可 ...

  5. MySql：SELECT 语句（五）正则表达式的使用

    关键字:REGEXP REGEXP 语句形式和 LIKE 语句相似,REGEXP 后面跟正则表达式.如果需要区分大小写,可以在 REGEXP 后加关键字 BINARY. 所有的正则表达式的规则都可以在 ...

  6. spring注解-“@Scope”

    @Scope可用来指定Spring创建bean的方式 默认为单实例,即@Scope("singleton").IOC容器启动的时候会调用方法创建对象并放到IOC容器中,以后每次获取 ...

  7. 吴裕雄 python 机器学习——岭回归

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets, linear_model from s ...

  8. mybatis出现无效的列类型

    package com.webapp.hanqi.test; import java.util.Date; import org.junit.jupiter.api.AfterEach; import ...

  9. vue(一)vue-cli安装

    第一步:我们首先要全局安装vue官方提供的脚手架工具:vue-cli $ npm install vue-cli -g 第二步:然后我们就可以创建自己的vue项目了, $ vue init webpa ...

  10. ThinkPHP3.2 --- 中文乱码问题

    在thinkphp中初次运行时 会出现中文乱码问题,解决方法也很简单 只需要在入口文件index.php加上这段代码即可: <?php header("Content-Type: te ...