Css里的BFC
2024-08-30 09:54:21
一、BFC简介
BFC全称:Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则
(可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素)
二、BFC的触发条件(只要元素满足下面任一条件即可触发 BFC 特性)
- body 根元素;
- 浮动元素:float 不为none的属性值;
- 绝对定位元素:position (absolute、fixed);
- display为: inline-block、table-cell、flex;
- overflow 除了visible以外的值 (hidden、auto、scroll);
三、BFC的布局规则
<1> 内部的盒子会在垂直方向,一个个地放置;
<2> BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
<3> 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ;
<4> 计算BFC的高度时,浮动元素也参与计算
<5> 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
<6> BFC的区域不会与float重叠;
四、BFC的应用
<1>解决margin重叠问题
<2>解决浮动高度塌陷问题
<3>解决侵占浮动元素的问题
五、解决方法(代码和效果图)
<1>解决margin重叠问题
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>解决margin重叠</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="one"></div>
<div class="box">
<div class="two"></div>
</div>
<div class="three"></div>
</body>
</html>
body{
margin:0 auto;
}
.box{
overflow:hidden;
}
.one{
height:50px;
background-color:red;
margin:20px 0;
}
.two{
height:50px;
background-color:red;
margin:20px 0;
}
.three{
height:50px;
background-color:red;
margin:20px 0;
}
效果图如下:
(若将box中的overflow:hiddden;去掉的话第二个div的margin就会和上下俩个div的margin重叠)
<2>解决浮动高度塌陷问题
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>解决父元素高度塌陷</title>
<link rel="stylesheet" href="index4.css"/>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
body{
margin:0 auto;
}
.box{
overflow:hidden;
width:500px;
background-color:yellow;
margin:0 auto;
}
.one{
height:50px;
width:100px;
background-color:red;
float:left;
}
.two{
height:100px;
width:200px;
background-color:blue;
float:right;
}
效果图如下:
图片描述
(不给父元素overflow:hiddden;的话由于父元素没高而子元素也由于浮动不能撑起父元素 ,父元素就会塌陷)
<3>解决侵占浮动元素的问题
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>解决侵占浮动元素的问题</title>
<link rel="stylesheet" href="index5.css"/>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two">
akehfakwehfaie<br/>
akehfakwehfaie<br/>
akehfakwehfaie<br/>
akehfakwehfaie<br/>
akehfakwehfaie<br/>
akehfakwehfaie<br/>
</div>
</div>
</body>
</html>
body{
margin:0 auto;
}
.box{
overflow:hidden;
width:700px;
background-color:yellow;
margin:0 auto;
}
.one{
height:100px;
width:150px;
background-color:red;
float:left;
}
.two{
height:170px;
background-color:blue;
/* float:left; */
overflow:hidden;
}
(这里是将红色div左浮给蓝色的divoverflow:hidden;蓝色的就不会被红色的挡住
注意要给父元素divoverflow:hidden;否则当蓝色框内容少时父元素会和蓝色div一起变化)
最新文章
- Jenkins 安装FAQ
- 推荐一个不错的css3网站 可以直接调用的
- Alpha版本十天冲刺——Day 5
- androidstudio 之 svn配置 汇总
- 数据库配置文件 conf.properties
- HDOJ 1233
- gitHub for windows设置网络代理
- linux命令之cat
- OpenGl入门——视口及物体移动函数
- node.js实践第二天
- build setting
- Fedora 20中解决zip解压文件时中文文件名的乱码问题[已解决]
- linux 下oracle 11g静默安装(完整版)
- JavaScript模块化思想之CommonJS、AMD、CMD、UMD
- java.lang.OutOfMemoryError: Java heap space解决方法 (有问题咨询加微信)
- 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制
- 常用的第三方模块 chardet url
- Paint House
- Windows server 2008 SSD性能测试
- MVC ---- ckeditor 循环遍历并绑定blur事件