.BFC概念：

　　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。

先记住一个原则： 如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

以下情况会触发BFC:
•<html>根元素
•float的值不为none
•overflow的值为auto，scroll，hidden
•display的值为table-cell，table-caption和inline--block中的任何一个
•position的值不为relative和static 即 position: absolute/fixed

显然我们在设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。

利用伪类元素清除浮动：

.clearFix::after,.clearFix::before {

display: block;

content: '';

clear: both;

visibility: hidden;

height: 0;

}

.clearFix { zoom: 1;}

什么是BFC？ CSS 如何使用伪元素清除浮动？的更多相关文章

  1. 使用before和after双伪元素清除浮动

    使用方法: .clearfix:before,.clearfix:after { content:"."; display:table; } .clearfix:after { c ...

  2. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  3. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  4. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  5. 使用after伪类清除浮动

    使用after伪类清除浮动 .department li:after{ content:"."; height:0; visibility:hidden; display:bloc ...

  6. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

  7. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  8. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  9. css中的伪元素，我今天记住了！o~yeah

    对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...

随机推荐

  1. IT引导学生成长的文章链接（十二）

    链接:IT学子成长指导类文章链接(1)(2)(3) (4) (5)(6)(7)(8)(9)(10)(11) "IT学子成长指导"类我收藏过的好文(十二期:至2014年4月26日) ...

  2. ZOJ 2334 HDU 1512 Monkey King

    题意: 猴子们打架  认识的猴子不会打架  两仅仅猴子打完以后就认识了  A认识B B认识C A也认识C  每次打架由两伙猴子进行  分别选出自己的最高战斗力  在战斗之后两仅仅猴子战斗力减半  给出 ...

  3. crossplatform----文本编辑器工具Atom安装

    1.简介 Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器.具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言.它支持宏,自动 ...

  4. duilib拖动控制功能的实现（源代码）

    转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件添加拖拽的功能.而实 ...

  5. VUE线上通过nginx反向代理实现跨域

    1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...

  6. WPF 多路绑定

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  7. QT如何编译出带调试信息的qtwebkit库

    因为在编译QT的时候默认是不编译成带调试信息的qtwebkit库的,不论如何设置参数都是没有用的.后面在一博客中查找到相关信息   1.编译带debug 信息的webkit 库 注释或者删除qt-ev ...

  8. 关于在.Net开发中使用Sqlite的版本选择问题

    原文:关于在.Net开发中使用Sqlite的版本选择问题 如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不 ...

  9. Fiddler应用

    Fiddler是什么 Fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一 . 它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请 ...

  10. 加快QT工程编译速度（还可给Qt for Android设置）

    一.多核编译 环境:win10, Qt 5.4.1,编译器mingw32 项目: Qt for Android Qt Creator 在编译android项目时不支持预编译,默认cpu单核编译,工程稍 ...