您的位置：首页 > Web前端 > CSS

CSS BFC和清除浮动

2019-04-10 16:47 309 查看

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不能使用伪类，所以加上此行代码
}

利用伪元素，就可以不再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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航