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

PrototypeZ 发布于2019-04-23 11:50 / 719人阅读

摘要：浮动，用于横向布局。浮动会破坏，即浮动元素脱离文档流当给一个元素设置浮动了之后，它不会再占用页面当中的位置了，造成的影响不会撑开父级的高度。如下图想要解决这个影响，就得清浮动清除浮动所造成的影响了。

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.ucloud.cn/yun/1234.html

css清浮动

摘要：元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。什么是浮动什么是浮动浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。允许浮动元素出现在两侧。我们在平常做项目的时候，float这个css属性经常会用到。元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。什么是浮动浮动元...

EdwardUp 2019-04-23 13:46 评论0 收藏0
如何清除浮动

摘要：本文概述本文的框架图如下一浮动到底是什么中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如果把所有三个框都向左浮动，那么框向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。本文概述本文的框架图如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

fjcgreat 2019-08-23 13:04 评论0 收藏0
如何清除浮动

摘要：本文概述本文的框架图如下一浮动到底是什么中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如果把所有三个框都向左浮动，那么框向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。本文概述本文的框架图如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

amuqiao 2019-08-02 11:59 评论0 收藏0
如何清除浮动

摘要：本文概述本文的框架图如下一浮动到底是什么中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如果把所有三个框都向左浮动，那么框向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。本文概述本文的框架图如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

wua_wua2012 2019-08-29 17:15 评论0 收藏0