CSS BFC和清除浮动

最新推荐文章于 2022-11-08 15:50:58 发布

guoxu0416

最新推荐文章于 2022-11-08 15:50:58 发布

阅读量362

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43971228/article/details/89187395

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BFC和清除浮动

一、BFC、IFC

BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。
BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 blockformatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 InlineFormatting Context(行内格式化上下文) 里格式化。

二、BFC的特性是什么？

BFC会阻止外边距叠加：
一般情况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。如果这两个相邻的块框不属于同一个BFC就不会叠加。BFC不会重叠浮动元素
BFC会计算内部浮动元素的高度。也就是浮动元素也会撑开父元素
BFC的区域不会与float的元素区域重叠。一个BFC的边框不能和它里面的元素的margin重叠。这意味着浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。当给一个挨着浮动的BFC添加负得外边距不会起作用！

三、什么时候产生BFC

根元素
float属性值不为none
diplay属性值为inline-block、table-cell（此元素会作为一个表格单元格显示（类似和））、tabel-caption（此元素会作为一个表格标题显示（类似））
position属性值不为static和relative的其他值
overflow属性值为auto、scroll、hidden

四、清除浮动

css 浮动后的元素不论是什么display的都默认是block就是设置inline也是block

使用overflow属性来清除浮动.ovh{overflow:hidden;}
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.触发BFC效果了。
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
使用额外标签法 .clear{clear:both;}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
- 内部标签：会将这个浮动盒子的父盒子高度重新撑开
- 外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
  注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
使用伪元素来清除浮动(作用于浮动元素的父亲)

.clearfix:after{
content:"";//设置内容为空，也可以content:"."
height:0;//高度为0
lineheight:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
*zoom:1;为了兼容性，因为ie6/7不能使用伪类，所以加上此行代码
}

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
利用伪元素，就可以不再HTML中加入标签。

:after 的意思是再.outer内部的最后加入为元素:after，
visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。
首先要显示伪元素，所以display:block，
然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；
其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0，
最后，要清除浮动，所以，clear:both。
tips:
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

五、::before和::after

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用::before或:;after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

<style>
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}
a{
    text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body>

效果：
在这里插入图片描述

清楚浮动（另一种方式）

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

关于::after和::before查看更多：
https://www.cnblogs.com/starof/p/4459991.html

guoxu0416

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS BFC和清除浮动

BFC和清除浮动一、BFC、IFCBFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。BFC是W3C...
复制链接

扫一扫

专栏目录