1.BFC---块级格式化上下文
只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器,内容元素和外部元素不会互相影响。
(1)触发BFC的方式
- 根元素
- 浮动 float:left/right;
- 固定或绝对定位 position:absolute/fixed;
- overflow不为visible overflow:hidden/auto;
- display:为表格布局或者弹性布局 display:inline-block/table-cell/table-caption/flex/inline-flex;
(2)BFC应用
- 避免边距重叠
- 清除浮动
- 实现两栏自适应布局
2.浮动
(1)浮动(float)
特点:使元素脱离标准流
作用:使块级元素排成一排;使文字围绕着浮动图片;
(2)清除浮动的方式
清除浮动是为了解决父元素因为子元素浮动引起的内部高度为0(高度塌陷)的问题。
高度塌陷:当所有子元素浮动时,且父元素没有设置高度,这时父元素就会产生高度塌陷。
(1)给父元素单独设置高度
缺点:无法进行自适应布局
(2)父级设置overflow:hidden;zoom:1(针对ie6)
缺点:布局上需注意溢出部分被隐藏
(3)给浮动元素后面添加一个空标签。clear:both;height:0;overflow:hidden;
缺点:添加空标签,不利于页面优化
(4)父级设置overflow:auto;
缺点:内部元素宽高超过父级元素,会出现滚动条
(5)给父元素添加伪类对象(万能清除法)
.father :after {
contain: '随便写';
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}