1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成 一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝。
2.独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,也就是说包含块会把浮动元素的高度也计算在内,所以不用清除浮动来撑起高度。

加overflow-hidden就可以解决高度塌陷问题,overflow-触发BFC的更多相关文章

  1. 浮动和包含框的关系,伪元素after解决高度塌陷

    浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...

  2. css overflow:hidden无效解决办法

    解决方案:只需要在设定overflow:hidden层加入定位即可 position:relative;left:0px;top:0px

  3. padding-top:100%解决高度塌陷问题

    <div class="img_box"> <img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/$ ...

  4. overflow:解决 div的高度塌陷问题

    高度塌陷是如何引起的? 解析: 当一个 div中所有的子  div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其  overflow:hidden;即可解决高度塌陷问题. 方式 ...

  5. 关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)

    1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...

  6. 学习微信小程序之css15解决父盒子高度塌陷

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

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

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

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

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

随机推荐

  1. 3DMAX贴图无法显示

    问题描述:我在点击"将材质指定给选定对象"按钮之后,模型只是变灰了,没有显示出我贴的图. 原因是:没有显示贴图. 我的解决方案:点击材质编辑器里面的"视口中显示敏感处理材 ...

  2. 3dContactPointAnnotationTool开发日志(三)

      今天的目的是把obj文件导到场景里.具体将制定路径的obj文件导进去我用的是这个方法.导进去后呈现的是一个黑色的影子.   导入后还想实现一下缩放功能,请看这个方法.缩放实现起来也很简单.   光 ...

  3. 大全Kafka Streams

    本文将从以下三个方面全面介绍Kafka Streams 一. Kafka Streams 概念 二. Kafka Streams 使用 三. Kafka Streams WordCount   一. ...

  4. git初始化之git config

    git初始化之git config     1. 下面的命令将修改/home/[username]/.gitconfig文件,也就是说下面的配置只对每一个ssh的用户可见,所以每个人都需要做.   提 ...

  5. 【Redis】- 缓存击穿

    什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查询,这样缓存就失去了意义.如果 ...

  6. LINUX硬件查看命令

    1.查看系统PCI设备 lspci lspci -v   显示更详细的PCI设备信息 2.查看CPU信息 more / proc /cpuinfo 3.查看系统内存信息 more /proc /mem ...

  7. Redis 基础:Redis 简介及安装

    Remote Dictionary Server(Redis)是一个由Salvatore Sanfilippo写的key-value存储系统.Redis是一个开源的使用ANSI C语言编写.遵守BSD ...

  8. 【以前的空间】bzoj [ZJOI2007]棋盘制作

    具体可以去跪<浅谈用极大化思想解决最大子矩形问题>(p.s. 蒟蒻跪了还是很晕,不过想到之前usaco好像是最后一章的一道题……看了下代码顿然醒悟) 也就是如果用o(nm)的方法维护一个极 ...

  9. [JSOI2008]小店购物 & bzoj4349:最小树形图 最小树形图

    ---题面(洛谷)--- ---题面(bzoj)--- 其实是同一道题,,,样例都一模一样 题解: 一开始看想了好久,,,还想到了最短路和最小生成树,,然而写的时候才意识到最小生成树应该要用无向边 其 ...

  10. 洛谷 P2657 [SCOI2009]windy数 解题报告

    P2657 [SCOI2009]windy数 题目描述 \(\tt{windy}\)定义了一种\(\tt{windy}\)数.不含前导零且相邻两个数字之差至少为\(2\)的正整数被称为\(\tt{wi ...