什么是BFC

BFC是什么并不重要。重要的是开启它干嘛?以及如何开启它

根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BFC

开启元素的BFC后,元素会有如下特性:

1.父元素的垂直外边距不会和子元素重叠。

2.开启BFC的元素不会被浮动的元素所覆盖。

3.开启BFC的元素可以包含浮动的子元素。

在以下情况下,会自动开启BFC:

1.设置元素浮动(此方法,虽然可以撑开父元素,但是会导致父元素的宽度丢失,也会导致下边的元素上移)

2.设置元素绝对定位

3.设置元素display:inline-block;(此方法虽然也可以解决问题,但是转为行内块也会导致宽度丢失,因此也不推荐此方法)

4.将元素的overflow设置为一个非visible的值(推荐方式:overflow:hidden;是副作用最小的开启BFC方式)

    注:ie6不支持BFC,如果要同时兼容ie6  可以加一个属性 zoom:1;即可(zoom表示放大,写几就是放大几倍,此属性仅支持IE,且IE8以下)

相关推荐

Csshtml文本闪烁代码

<style> @keyframes blink { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } .blinkin

html表格table使,以及表格Css样式

通用代码,拿来即用<style> table{border-spacing:0px;border-collapse: collapse ;} td,th{border:1px soli

mysql8.0永久关闭二进制日志

打开 mysql安装目录找到my.inimysql8.0默认是开启的。在最后面加上#禁用二进制日志 skip-log-bin重启mysql服务 即可

VARChAR(250) 里面数字有什么作用

一直很好奇 VARCHAR(10) 和 VARCHAR(255) 有什么区别如果没有区别 为什么要设计这个?后来突然想到了可能的原因 只是猜测 没查阅资料也没验证很可能是这个数字就是决定 记录长度是使

C#项目下文件夹内各个文件的作用

bin存放编译的结果obj用于存放编译过程中生成的中间临时文件Properties定义你程序集的属性.cs源代码都写在这里,主要就看这里的代码.resx资源文件,一般不用看。.csprojC#项目文件

74hC245芯片的作用 引脚图以及功能 (解决单片机输出功率不足问题)

以下仅为简单总结,详情请参阅购买开发板附带的资料作用: 由于单片机输出的功率不足,所以可以通过74HC245来增强他的电流上限功能:八个输入信号原封不动的输出,只不过可接的电流更大一些。可解决led太

Css定位:相对定位绝对定位固定定位区别与特性

css定位常用的有以下三种:使用了定位的共同特性:这三种定位可以设置四个值,但是通常只用到2个值就可以完成定位如果只写了定位 没有设置偏移量,则元素位置都不会改变,默认值为原来的位置.使用了定位,.元

zblog二级下拉菜单Css样式

zblog的二级下拉菜单css样式@media screen and (min-width: 1200px) { .li-subcate{ display:none; }

zblog静态化出现Css样式错乱解决方法

在使用纯静态和插件的时候 有一部分用户出现了 少数网页排版错乱问题一般这种情况都是 https开启了 但是http的也可以访问 导致的可以在宝塔里面开启强制https即可解决或者去应用中心搜 San_

Chrome浏览器自定义Css 屏蔽百度热搜榜

首先建议大家下载一个 "山寨"的chrome浏览器之所以我叫他"山寨"是因为他使用的chrome内核开发 并且chrome有的它都有,外观也几乎一模一样之所以用