当面试官问道你高度塌陷时,人们第一想到的方法一定是

.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

 对,没错,这是一个完美的解决方案,但是我们有考虑过这个方案的实现原理吗,或者面试管继续问你这个方法的原理是什么?是不是一脸懵,不懵的也别杠,接下来我通过排他法来展示他的原理

 1. 首先 ::after 是元素的伪元素,在元素后面生成伪元素

 2.content 是伪元素的内容,为空,只是让伪元素不显示,显然不是原理

 3. height:0 是为了让伪元素高度为0 ,显然不是

 4. visibility:hidden 是为了伪元素浏览器渲染但不显示,显然也不是

 5. display: block 只是为了让伪元素成为块级元素,成为触发 clear:both 的条件,有点关系

 6. clear:both 规定在左右两侧不允许出现浮动元素, 这便是清除浮动的原理了

那么为什么要清除浮动,最常见的原因是 外层容器高度塌陷,下面简单演示一下

<style>
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '伪元素';
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
</style>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<div style="background: #000; width: 200px;">ccc</div>
</body>

  

这便是高度塌陷的情况,按理解来说,黑色的div 应该存在于 .weap 下面,这就轮到 clear:both 出场了

<style>
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
</style>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<div style="background: #000; width: 200px;">ccc</div>
</body>

  

现在高度塌陷问题就解决了

接下来咱们聊聊 BFC, 触发BFC 也能解决高度塌陷等问题,咱们先来了解 BFC的概念及其规则

 1. 概念

  BFC的全称是 Block Formatting Contexts。

   Formatting Contexts是页面中的一块渲染区域,它拥有一套渲染规则,决定其子元素将如何定位,以及和其它元素的关系      和相互作用。说白了就是一个决定如何渲染元素的容器。

 2. BFC 的渲染规则

  ①: 内部的块级元素会在垂直方向,一个接一个地放置

  ②: 块级元素垂直方向的距离由margin 决定。属于同一个BFC的相邻元素的margin 会重叠

   3:  对于从左往右的格式化,每个元素(块级元素与行内元素)的左边缘,与包含块的左边缘相接触,(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此,除非其中元素再生成一个BFC

  ④: BFC的区域不会与浮动元素重叠。

  五:BFC是一个隔离的独立容器,容器里面的子元素和外面的元素互不影响

  ⑥: 计算BFC容器的高度时,浮动元素也参与计算。

 3. 触发 BFC 条件

根元素
float的值不是none。
position的值不是static或者relative。
display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
overflow的值不是visible。

 4. BCF 应用

    4.1 规则二

       以上渲染规则,第一点很好理解,第二点我们用一盒例子来解释

<body>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>

  

按样式代码来看,红块和蓝块之间间距应该是40px。但实际上是20px。这就是BFC渲染规则的第二点。

因为BFC的触发条件之一就是根元素,所以body就是一个BFC容器,红块和蓝块是同在body下的相邻块级元素,其margin会生重叠,所以红块和蓝块之间间距只有20px

我们利用BFC渲染规则第2点(属于同一个BFC的两个相邻块级元素的margin会发生重叠),那么不属于同一个BFC的两个相邻块级元素的margin就不会发生重叠。

那么我们在第二个div元素用一个div元素包裹起来,并用overflow:auto触发其BFC。再看一下效果是不是不重叠了。

<body>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="overflow:auto">
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</div>
</body>

    4.2 实现自适应两栏布局

自适应两栏布局,是一个主内容区域和一个侧边栏区域组成,两个区域的宽度都可以随窗口大小自适应。有很多种写法可以实现,我们这里使用BFC 实现

<style>
.main{
background: red;
height:500px;
}
.sider {
float: left;
width: 20%;
height:300px;
background: blue;
}
</stley>
<body>
<div class="sider">我是侧边栏</div>
<div class="main">我是主体内容</div>
<body>

  

首先我们根据规则1,要先把.sider div写在.main div前面。这个.sider div才会浮动起来覆盖在.main div上面。

再根据规则4(BFC的区域不会与浮动元素重叠),给.main加上overflow:auto;触发.main div生成BFC。

整理高度塌陷与BFC的更多相关文章

  1. 高度塌陷与BFC

    高度塌陷的产生条件 子元素浮动,脱离文档流 子元素绝对定位或固定定位,脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 ...

  2. 高度塌陷与 BFC

    1. 高度塌陷 在浮动布局中,父元素的高度默认是被子元素撑开的  当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失  父元素高度丢失以后,其下的元 ...

  3. 加overflow-hidden就可以解决高度塌陷问题,overflow-触发BFC

    1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...

  4. 浅谈BFC与高度塌陷

    这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...

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

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

  6. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  7. css关于浮动的高度塌陷

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

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

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

  9. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

随机推荐

  1. Python操作rabbitmq系列(五):根据主题分配消息

    接着上一章,使用exchange_type='direct'进行消息传递.这样消息会完全匹配后发送到对应的接收端.现在我们想干这样一件事: C1获取消息中包含:orange内容的消息,并且消息是由3个 ...

  2. floyd三重循环最外层为什么一定是K

    Floyd算法为什么把k放在最外层? - 知乎 https://www.zhihu.com/question/30955032高票答案: 简单地总结一下:K没放在最外面一定是错的,但是在某些数据比较水 ...

  3. AJ学IOS(01) UI之Hello World与加法计算器

    不多说,AJ分享,必须精品 这两个一个是HelloWorld(左边) 另一个是 加法计算器(右边)的截图. 先运行第一个 程序看看效果 1.打开Xcode(没有哦mac系统的没有xcode的帮你们默哀 ...

  4. (一) Mybatis源码分析-解析器模块

    Mybatis源码分析-解析器模块 原创-转载请说明出处 1. 解析器模块的作用 对XPath进行封装,为mybatis-config.xml配置文件以及映射文件提供支持 为处理动态 SQL 语句中的 ...

  5. Extjs更新grid

    基于Extjs4.2 原理是创建一个新的store,来覆盖原有的store. //创建数据 var newdatas = { name: "ly", age: 17, adress ...

  6. Python发送http请求时遇到问题总结

    1.报错信息为“ERROR 'str' object has no attribute 'endwith'”,排查发现endswith方法名写错了,少了s,写成了 'endwith' if inter ...

  7. 这价格看得我偷偷摸了泪——用python爬取北京二手房数据

    如果想了解更多关于python的应用,可以私信我,或者加群,里面到资料都是免费的 http://t.cn/A6Zvjdun 近期,有个朋友联系我,想统计一下北京二手房的相关的数据,而自己用Excel统 ...

  8. stand up meeting 12/11/2015

    part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 完成单词释义热度排序:允许用户自主添加释义:完成了button位置的修正(finally)和弹窗的美化:     6 tr ...

  9. E1. Send Boxes to Alice (Easy Version)

    题解: 保存每个1的位置.然后记录1的总个数cnt,如果存在一个k使得这个k是每个集合的倍数,那么为了使操作次数最小,这个k应该是cnt的质因子.(因为都是每个集合的数目1,使每个集合的数目变为2需要 ...

  10. 详解 volatile关键字 与 CAS算法

    (请观看本人博文 -- <详解 多线程>) 目录 内存可见性问题 volatile关键字 CAS算法: 扩展 -- 乐观锁 与 悲观锁: 悲观锁: 乐观锁: 在讲解本篇博文的知识点之前,本 ...