<!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. pycharm中运行成功的python代码在jenkin中运行问题总结

    我们在用selenium+python完成了项目的UI自动化后,一般用jekins持续集成工具来定期运行,python程序在pycharm中编辑运行成功,但在jenkins中运行失败的两个问题,整理如 ...

  2. python3 里安装cv2

    电脑上同时有python2 和python3,python2 里有cv2,Python3里没有. 用pip3 install opencv-python 安装,提示: You are using pi ...

  3. 6Linux用户身份与文件权限

    3类用户身份: (1)管理员UID为0,root (2)系统用户UID为1-999:nologin不能登录系统,老版本5.6中是1-499 (3)普通用户UID为1000开始,老版本5.6中是1000 ...

  4. Mac谷歌浏览器跨域

    1.创建一个文件夹,这个文件夹是用来保存关闭安全策略后的用户信息的,名字可以随意取,位置也可以随意放,我用的是MyChromeDevUserData open -n /Applications/Goo ...

  5. for循环，while循环，do while循环

    for循环: for循环格式: for(初始化语句;判断条件语句;控制条件语句) { 循环体语句; } 例子:取五位数各个位数的练习 public static void main(String[] ...

  6. 本地jar包添加至Maven仓库

    Maven命令将本地的jar包方放到maven仓库中 //自定义本地的jar包在pom文件的参数 <dependency> <groupId>com.eee</group ...

  7. 模型压缩,模型减枝,tf.nn.zero_fraction,统计0的比例,等。

    我们刚接到一个项目时,一开始并不是如何设计模型,而是去先跑一个现有的模型,看在项目需求在现有模型下面效果怎么样.当现有模型效果不错需要深入挖掘时,仅仅时跑现有模型是不够的,比如,如果你要在嵌入式里面去 ...

  8. Linux Simple Systemd Service Guide

    Simple Systemd Service Guide 主题 Systemd介绍 Systemd基本操作 怎样编写_service_.service文件 怎样部署service Systemd介绍 ...

  9. Quartz与Spring集成（二）

    一.获取quartz详情jar <!-- quartz 的jar --> <dependency> <groupId>org.quartz-scheduler< ...

  10. j2EE基础知识

    感觉应付面试足够了 一.基本概念 1.1 WEB开发的相关知识 WEB用于表示Internet主机上供外界访问的资源. Intrenet上供外界访问Web资源分为 静态web资源:web页面中供人们浏 ...