BFC
BFC：块级格式化上下文
BFC的布局规则
如何创建BFC
1、 float 的值不是 none 。
2、 position 的值不是 static 或者 relative 。
3、 display 的值是 inline-block 、 table-cell 、 flex 、 table-caption 或者 inline-flex
4、 overflow 的值不是 visible
BFC的作用
1.利用BFC避免margin重叠。
2.自适应两栏布局
3.清除浮动。
清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
清除浮动的方法
1. 额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；(不推荐)
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
<style>
.div1 {
background: #00a2d4;
}
.left {
float: left;
width: 200px;
height: 200px;
background: #9889c1;
}
.right {
float: right;
width: 200px;
height: 200px;
background: orangered;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clear"></div>
</div>
<div class="div2"></div>
</body>
2.父级添加overflow属性
通过触发BFC方式，实现清除浮动。（不推荐）
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
background: #00a2d4;
overflow: hidden;
}
.left {
float: left;
width: 200px;
height: 200px;
background: #9889c1;
}
.right {
float: right;
width: 200px;
height: 200px;
background: orangered;
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>
3.使用after伪元素清除浮动（推荐使用）
优点：符合闭合浮动思想，结构语义化正确。
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
background: #00a2d4;
}
.left {
float: left;
width: 200px;
height: 200px;
background: #9889c1;
}
.right {
float: right;
width: 200px;
height: 200px;
background: orangered;
}
.clearfix:after {
content: ""; /*内容为空*/
display: block; /*转换为块级元素*/
height: 0; /*高度为0*/
clear: both; /*清除浮动*/
visibility: hidden; /*隐藏盒子*/
}
.clearfix {
*zoom: 1; /*IE6\7的处理方式*/
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>
4.使用before和after双伪元素清除浮动
优点：不仅可以清除浮动，也可以解决高度塌陷的问题（给父盒子添加类名clearfix）
缺点：用zoom:1触发hasLayout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
background: #00a2d4;
}
.left {
float: left;
width: 200px;
height: 200px;
background: #9889c1;
}
.right {
float: right;
width: 200px;
height: 200px;
background: orangered;
}
.clearfix:after, .clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>
总结
到此这篇关于CSS 清除浮动、BFC的文章就介绍到这了,更多相关css 浮动 BFC内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
adobe dreamweaver cc 2014 是Adobe Dreamweaver CS6的升级版本，相对来说相应速...
前言 众所周知，css如何实现元素垂直居中？已经是一个老生常谈的问题了，这个问...
打开dw，先修改一下页面属性，将页面修改为灰色的，适合图片展示 打开布局属性，...
01 Winter Flakes （仅个人） 02 Snowtop Caps （可商用） 03 Modius Frigid （...
滚动字幕在FrontPage的组件里有，但是FrontPage这个软件只能支持单行文字，一出...
讲干货，不啰嗦，有时候前端会遇到背景虚化但要求内容清晰的需求，先看效果： 以...
write by 阿会楠 环境：IE7+IE6 时间 2008-7-30 2008-7-30 2008-7-30 2008-7-30 ...
简介： 日前，在由全球分布式云联盟主办的“Distributed Cloud | 2021 全球分布...
CSS2.0 HandBook上的解释： 设置此属性值为 absolute 会将对象拖离出正常的文档...
这个开源项目就是： go-gin-api ，目前 800+ Star。 go-gin-api 是基于 Gin 进行...
