标签:上下文 影响 局限 特征 包含 添加 元素 使用场景 浮动
浮动元素会脱离文档流,向左/向右浮动(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清除浮动就是用的“包含浮动”这条特性。
我们可以给父元素添加以下属性来触发BFC:
float
为 left
| right
overflow
为 hidden
| auto
| scorll
display
为 table-cell
| table-caption
| inline-block
| flex
| inline-flex
position
为 absolute
| fixed
所以我们可以给父元素设置overflow:auto
来简单的实现BFC清除浮动,但是为了兼容IE最好用overflow:hidden
。但是这样元素阴影或下拉菜单会被截断,比较局限。
标签:上下文 影响 局限 特征 包含 添加 元素 使用场景 浮动
原文地址:https://www.cnblogs.com/joeynkay/p/12771227.html