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

最新推荐文章于 2022-07-20 12:27:04 发布

weixin_30635053

最新推荐文章于 2022-07-20 12:27:04 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/ycgo/p/10368096.html

版权

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

关注