CSS 清除浮动与BFC的方法
发布时间：2020-03-23 16:25:39 作者：梁柱 
我要评论
我要评论这篇文章主要介绍了CSS 清除浮动、BFC的相关资料,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
BFC
BFC：块级格式化上下文
BFC的布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 计算BFC的高度时，浮动元素也参与计算。
- BFC的区域不会与float box重叠。
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
css overflow: hidden 的用法(溢出隐藏及清除浮动)
overflow:hidden是经常用到的一个css属性，它有两种常用用法：溢出隐藏和清除浮动，这里就为大家介绍一下,需要的朋友可以参考下2020-03-13
这篇文章主要介绍了CSS实现元素浮动和清除浮动的方法,简单介绍了浮动的基本知识，通过截图代码的形式给大家介绍了css清除浮动的方法，需要的朋友可以参考下2019-12-05
这篇文章主要介绍了Css实现清除浮动的方法汇总,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-11- 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这篇文章给大家介绍了CSS 使用伪元素清除浮动的方2019-07-01
本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码，非常不错，具有一定的参考借鉴价值，,需要的朋友可以参考下2019-04-29
这篇文章主要介绍了css 如何清除浮动的示例代码，详细的介绍了浮动到底是什么和清理浮动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看2018-11-12
本文通过多种方法给大家介绍CSS清楚浮动clear:both的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-11-16
最新评论