BFC----Clearfix

BFC----Block Formatting Context

  1. .clearfix {
  2. *zoom: 1;
  3. }
  4. .clearfix:before,
  5. .clearfix:after {
  6. display: table;
  7. line-height: 0;
  8. content: "";
  9. }
  10. .clearfix:after {
  11. clear: both;
  12. }

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

构成Block Formatting Context的方法有下面几种:

  1. float的值不为none。
  2. overflow的值不为visible。
  3. display的值为table-cell, table-caption, inline-block中的任何一个。
  4. position的值不为relative和static。

很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。

因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求

(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个

但是display: inline-block会产生多余空白,所以也排除掉。

剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context

因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。

这样我们新的.clearfix就会闭合内部元素的浮动。

时间: 2024-11-05 13:41:59

BFC----Clearfix的相关文章

css问题

一.浮动 1.浮动特点:脱离文档流,向左/向右浮动直到遇到父元素或者别的浮动元素,浮动会导致父元素高度坍塌. 2.清除浮动:clear和bfc /* clearfix方案(clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间) */ .clearfix:after{ content: '';display: block;clear: both; } /* overflow不为none会触发bfc,具有bfc特性的元素的子元素不会

清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用. 1.在容器div的里面结束标记之前写如下这样的div这段代码: <div style="clear:both"></div> 虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标签,违背了结构和表现分离的web标准的精髓,如果页面空标签多

【前端】伪元素选择器 、after和before伪元素

伪元素选择器 " : : " 比如说 p::first-letter { 选择第一个字 font-size: 100px; } p::first-line { 第一行 color: red; } p::selection { /*选择文字时候的状态*/ background-color: pink; color: yellow; 使用before和after双伪元素清除浮动 这是空元素的升级版,好处是不用单独加标签了 after可以在之后加入新内容,before在前面加内容,但是一定要

inline-block BFC 边距合并

在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并? 首先,外边距的合并出现在垂直方向上,两个块级元素垂直外边距相邻时,两者的原外边距会合并成一个高度等于两者中较大的新外边距. 在正常的文档流下,没有边框,没有padding,但有外边距时,上下的margin会出现合并,高度等于两者中的较大者. 不让相邻元素外边距合并的方法: 加外边框,加padding: 父元素加overflow(不为visible); 父元素加display:inline-block; 父元素加float; 父

CSS BFC和IE Haslayout

一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC float的值不为none. overflow的值不为visible. display的值为table-cell, table-caption, inline-block中的任何一个. position的值不为relative和static. 2.BFC的作用 不和浮动元素重叠 如果一个浮动元素后面跟着一

【转】css学习专题-BFC

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b

BFC and Haslayout

一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC float的值不为none. overflow的值不为visible. display的值为table-cell, table-caption, inline-block中的任何一个. position的值不为relative和static. 2.BFC的作用 不和浮动元素重叠 如果一个浮动元素后面跟着一

更加直观地了解hasLayout和BFC

网络上有很多关于hasLayout和BFC相关的文章,但是大部分都显得有些晦涩难懂.所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响. 基础知识 在讲hasLayout和BFC之前,先简单地过一下元素布局的一些基本知识. 元素本身的布局方式可以从display上表现出来 block,对应块级元素 inline,对应行内元素 inline-block none 当然,还有更多的一些属性,我们只提及主要部分. 块级元素,在浏览器中通常是垂直布局,然后可以用margin

学习笔记:清除浮动的原理(BFC与hasLayout)

利用元素浮动来布局相信大家已经不再陌生了,但浮动会带来高度塌陷的问题(这里就不详诉了,有兴趣的朋友可以自行搜索).既然浮动会带来不好的影响,那我们就需要去解决这个问题.其实清除浮动带来的影响也就是我们常说的”清除浮动”的方法非常简单,网上随便一搜就知道了,但大部分像我这样的菜鸟都不知道背后的原理是什么.所以今天我主要是谈谈清除浮动背后的原理. 要了解清除浮动的原理,首先我们要了解BFC这个名词. BFC(Block Fomatting Context) BFC,翻译过来就是”块级格式化上下文”.

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言 要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是