CSS BFC和清除浮动

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

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

    • 外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子.
      注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.

  3. 使用伪元素来清除浮动(作用于浮动元素的父亲)
.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

你可能感兴趣的:(CSS)