为什么?
- 子元素的浮动导致了父元素高度的塌陷。
怎么办?
两个方法:
- 方法一:脚底插入clear:both;
- 方法二:父元素BFC(ie8+)
方法一:
- 采用伪元素,这里我们使用:after。添加一个类clearfix: (推荐)
在我们需要清除浮动时,只需要给父元素追加clear类即可,既方便又符合语义化。
该方法的缺点是,IE6/IE7不识别:after伪元素,存在兼容性问题
代码:
<div class="box clearFix">
<div class="child">11</div>
<div class="child">22</div>
<div class="child">33</div>
</div>
<style type="text/css">
.box {
width: 700px; margin: 0 auto; border: 2px solid green;
}
.child {
width: 200px; height: 200px; background: red; float: left; margin: 10px;
}
.clearFix::after{
content: '';
display: table;
clear: both;
}
</style>
方法二:
-
使用overflow属性,给父元素添加overflow:hidden ||auto;
-
BFC/haslayout通常声明
float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+) width/height/zoom:1/…(IE6/IE7)
-
BFC块级格式化上下文有以下特征:
内部的Box会在垂直方向,从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box叠加。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。 计算BFC的高度时,浮动元素也参与计算。
-
不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文,下列方法都可以:
浮动 (元素的 float不为 none) 绝对定位元素 (元素的 position为 absolute 或 fixed) 行内块 inline-blocks (元素的 display: inline-block) 表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性) 表格标题 (元素的 display: table-caption,HTML表格标题默认属性) overflow的值不为 visible的元素 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
-
采用float属性之后产生的现象:
元素block块状花(砖头化) button默认的display是inline-block,加上float:left之后display变为block 破坏性造成的紧密排列特性(去空格化)