高度塌陷
父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移,导致整个页面的布局混乱
margin塌陷
指的是嵌套父子块级元素垂直方向(次方向)的margin会结合到一起,并取最大的值。
block formatting context即块级格式化上下文。它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系。它会让盒模型的渲染规则发生改变,并且创建一个新的环境并与外界相隔。
如何启动BFC
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible
清除浮动
1.找到浮动元素的父元素,设置overflow:hidden,不过溢出不可见
<style>
img{
width:50px;
border:1px solid #8e8e8e;
float:left;
}
</style>
<div style="overflow:hidden">
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<img src="images/nav_left.jpg"/>
</div>
2.在所有浮动元素的下方添加一个空标签,设置clear:both,这种方式增加了不必要标签,不常用
<style>
img{
width:50px;
border:1px solid #8e8e8e;
float:left;
}
</style>
<div style="overflow:hidden">
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<div style="clear:both"></div>
</div>
3.(推荐)原理类似于第二种方式,不过是用伪类选择器,在父元素后面添加了一个clear:both的属性。主流都是这样用。。。
<style>
.clearfix:after{
content:'';
display:block;
clear:both;
}
.clearfix{//兼容低版本IE
zoom:1;
}
</style>
<div class="clearfix">
<img src="images/search.jpg"/>
<img src="images/tel.jpg"/>
<img src="images/weixin.png"/>
<img src="images/nav_left.jpg"/>
<!-- <div style="clear:both;"></div> -->
</div>