float浮动-清浮动BFC渲染机制

float浮动,用于横向布局。 起初的横向布局都用 display:inline-block ,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格: font-size:0;, 但影...

float浮动,用于横向布局

起初的横向布局都用 display:inline-block ,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格: font-size:0;, 但影响很大。
 
float浮动会破坏 line-box ,即浮动元素 脱离文档流 (当给一个元素设置浮动了之后,它不会再占用页面当中的“位置”了),造成的影响: 不会撑开父级的高度 。如下图:
想要解决这个影响,就得清浮动(清除浮动所造成的影响)了。
清浮动后,如下:
清浮动的方法:
1.给浮动元素的父级加高度
  拓展性不好
  在不能确定父级高度的情况下不能使用
 
2.clear:both(用得最多的方法)
  *zoom:1 用来触发 hasLayout(IE浏览器的BFC)
.clear{
     *zoom: 1;/*兼容IE6,7*/
}
.clear:after{
      content: '';
      display: block;
      clear: both;
}
3.BFC(是一套渲染机制)
  触发一个元素的BFC( Block Formatting Contexts,即块级格式化上下文)
  相当于在这个元素里面建立起一堵围墙
  围墙里面的内容和围墙外面的内容不会产生干扰,如:
overflow: hidden;
想要触发BFC的方式(满足任一条件即可):
(1)float的值不为none;
    (2)overflow的值不为visible;
    (3)display的值为 inline-block, table-cell, table-caption, flex, inline-flex 之一;
    (4)position的值不为static或则releative中的任何一个。
  • 发表于 2019-02-14 14:20
  • 阅读 ( 181 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除