首页 > > 网页制作 > css >

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

2019-02-17 01:48:39来源：博客园阅读 ()

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中的任何一个。

原文链接:https://www.cnblogs.com/ycgo/p/10368096.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

热门词条

最新资讯

热门关注

热门标签