浮动及清除浮动的方式

Posted 2021-02-22 joeynkay

　　浮动元素会脱离文档流，向左/向右浮动（float:left||right），直到碰到父元素或另一个浮动元素；可能会有覆盖普通元素的风险，若普通元素在浮动元素之后，就会被覆盖，因为浮动元素不占正常文档流位置，普通元素移动到浮动元素的位置，被浮动元素覆盖；

　　clear清除浮动：clear属性不允许被清除浮动元素的左右紧挨着浮动元素，底层原理是在被清除浮动的元素的上下添加足够的清除浮动空间---以达到不紧挨着浮动元素的目的；

　　不要在浮动元素上清除浮动；我们是通过在别的元素上清除浮动来撑开盒子高度的；

<div class="box-wrapper clearfix">
  <div class="box"></div>
  <div class="box"></div>
</div>

.box-wrapper { border: 5px solid red; } 
.box-wrapper .box { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; }
// 现代浏览器clearfix方案，不支持IE6/7 
.clearfix:after { display: table; content: " "; clear: both; } 
// 全浏览器通用的clearfix方案 // 引入了zoom以支持IE6/7 
.clearfix:after { display: table; content: " "; clear: both; } 
.clearfix{ *zoom: 1; } 
// 全浏览器通用的clearfix方案【推荐】 // 引入了zoom以支持IE6/7 // 同时加入:before以解决现代浏览器上边距折叠的问题 
.clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; } 
.clearfix{ *zoom: 1; }

　　BFC清除浮动：

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

1. BFC就是页面上的一个独立的容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到容器内的子元素。
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的相邻盒子的上下margin会发生折叠；分别触发两个元素的BFC，就可以解决垂直边距折叠的问题
3. BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。---BFC盒子会计算浮动元素的高度

其中，BFC清除浮动就是用的“包含浮动”这条特性。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

1. float 为 left | right
2. overflow 为 hidden | auto | scorll
3. display 为 table-cell | table-caption | inline-block | flex | inline-flex
4. position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。