先来看两个overflow:hidden的使用例子

1、嵌套布局内部块元素设置float:left时,导致外部元素塌方,高度为0的问题。

<div class="wrap">
<div class="item"></div>
<div class="item"></div>
</div>
.wrap {
outline: red 1px solid;
width: 250px;
/*overflow: hidden;*/
} .item {
height: 20px;
width: 100px;
outline: blue 1px solid;
float: left;
margin: 10px;
}

通过去掉wrap CSS中的overflow: hidden;的注释,显示效果如下:

2、左右布局DIV,左侧DIV设置为float: left, 当右侧DIV高度超过左侧DIV时,右侧内容向左塌陷问题。

<div>
<div class="left"></div>
<div class="content">
<div>AAAAAAAAAAAAAAAAAA</div>
<div>BBBBBBBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCCCCCCC</div>
</div>
</div>
.left {
float: left;
height: 20px;
width: 100px;
outline: red 1px solid;
} .content {
/*overflow: hidden;*/
outline: green 1px solid;
width: 250px;
} .content div {
outline: blue 1px solid;
margin: 5px;
height: 20px;
}

通过以上两个例子,我们发现overflow: hidden;在布局时有神奇的治理布局塌方的功效。

其实,这是CSS2.1中定义的一个叫BFC(Block formatting context)的概念在起作用。所谓BFC,可直译为“块格式化上下文”,BFC定义了一块独立的渲染区域,规定了其内部块级元素的渲染规则,其渲染效果不受外界环境的干扰。

BFC定义了如下布局规则:

  1. 内部的块元素会在垂直方向,一个接一个地放置。
  2. 块元素垂直方向的距离由margin决定。两个相邻块元素的垂直方向的margin会发生重叠。
  3. 每个元素的左外边距,与包含块的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float元素的区域重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算

以上的两个例子,就分别用到了规则的6和4。

那么,在什么情况下,元素的BFC才能生效呢?

根据CSS规范,当给元素添加下列Style属性时,元素成为一个BFC元素。

  1. float为 left|right
  2. overflow为 hidden|auto|scroll
  3. display为 table-cell|table-caption|inline-block
  4. position为 absolute|fixed

神奇的overflow:hidden及其背后的原理的更多相关文章

  1. css中:overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  2. BFC 神奇背后的原理

    BFC已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发BFC, 以及BFC的一些用处(如清浮动,防止margin重叠等).虽然我知道如何利用BFC解决这些问题,但当别人问我BFC ...

  3. 为什么overflow:hidden能达到清除浮动的目的?

    1. 什么是浮动 <精通CSS>(第3版)关于浮动的描述: 浮动盒子可以向左或向右移动,直到其外边沿接触包含块的外边沿,或接触另一个浮动盒子的外边沿. 浮动盒子也会脱离常规文档流,因此常规 ...

  4. 前端精选文摘:BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  5. 【转】前端精选文摘:BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  6. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  7. [转]BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 前端精选文摘:css之BFC 神奇背后的原理(转载)

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  9. CSS中为什么overflow:hidden能清除浮动(float)的影响?原理是什么?

    http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...

随机推荐

  1. 网页播放rtsp流媒体

    解决方法: 1.搭建Red5流媒体服务器(其他还有CRTMPD.NGINX-RTMP.SRS) 2.FFmpeg(其他还有live555)实现监控摄像头的RTSP协议转RTMP协议直播 3.搭建WEB ...

  2. 20181229模拟 T1 palindrome

    20181229模拟 T1 palindrome 题意 : \(S\)是字符串\(s\)的子串可重集,求\(\sum\limits_{x\in S}\sum\limits_{y\in S}(|x|+| ...

  3. codevs 2503 失恋28天-缝补礼物

    题目描述 Description 话说上回他给女孩送了n件礼物,由于是廉价的所以全部都坏掉了,女孩很在意这些礼物,所以决定自己缝补,但是人生苦短啊,女孩时间有限,她总共有m分钟能去缝补礼物.由于损坏程 ...

  4. 在asp.net中使JQuery的Ajax用总结

    自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方 ...

  5. Android手机里的垃圾文件和文件夹清理

    SD卡中各个文件夹功能的最详尽分析SD卡用久了会有好多文件夹出现,大家看看都是干什么用~ 1..android_secure  是官方app2sd的产物,删了之后装到sd卡中的软件就无法使用了.2.. ...

  6. [转] 如何用BSP树生成游戏地图

    作者:Timothy Hely 当用对象随机填充某个区域如地下城中的房间时,你可能会遇到的问题是太过随机,导致分布疏密不均或混乱.在本教程中,我将告诉大家如何使用二进制空间划分法(游戏邦注:即Bina ...

  7. BZOJ3289:Mato的文件管理

    浅谈莫队:https://www.cnblogs.com/AKMer/p/10374756.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?i ...

  8. Azure CLI的Query

    Azure CLI 2.0是基于Python的命令行.其命令直观,使用非常方便. 其输出有四种模式: --output -o : Output format. Allowed values: json ...

  9. PHP7卓越性能背后的原理有哪些?

    作者:韩天峰链接:http://www.zhihu.com/question/38148900/answer/75115687来源:知乎 PHP7在运行原理上与PHP5相比并没有变化,这与hhvm不同 ...

  10. 数据格式化和ModelAttribute注解的介绍

    关于数据传递: 客户端传递数据到服务端: 1.使用普通的形式 A.传递简单的数据 如果是说你传递的数据的名称跟控制层中的形参的名称不一致的情况下需要使用 注解: @RequestParam()如果存在 ...