overflow与BFC



为什么:


加了clear:both


加了clear:both


加了clear:both无变化


俩栏自适应布局
bfc属性的特性
避免margin穿透
清除浮动写法
两栏自适应布局常用写法
设置浮动元素的margin-right来撑开间距
设置了overflow的scroll、auto、hidden之后,外部容器为BFC,可以不受内部元素浮动的影响
BFC(块级格式化上下文),内部的任何状态都不会影响外部
ie6不支持内部浮动无影响
父元素设置overflow:visible后高度无影响依然塌陷
overflow与块状格式化上下文:
1、清除浮动:
.clearfix{*zoom:1;}
.clearfix:after{content:'';display:table;clear:both;}
2、两栏自适应:
.cell{
display:table-cell;width:2000px; //IE8+ BFC特性
*display:inline-block;*width:auto; //IE7- 伪BFC特性
}
overflow与BFC
广为流传的两栏自适应布局
BFC属性的表现
用padding做流体布局玩玩不可 bfc化
right设置margin,right设置padding都不好
让left设置margin,间距设多少就是多少
左浮右overflow hidden
解决margin穿透问题
如果是局部修复,overflow是最好的方式
overflow与BFC
1、清除浮动影响
2、避免margin穿透问题
3、两栏自适应布局
BFC属性
overflow和bfc

1.清除浮动

2.避免margin穿透


3.两栏自适应布局


流体特性下的自适应布局





overflow与两栏自适应布局





overflow:hidden实现的bfc两栏布局,副作用会导致使用hidden值的
元素内容溢出被隐藏。
.cell{
display: table-cell;
width: 9999px;
*display: inline-block;
*width: auto;
}
5555555555
66666
Overflow与BFC







两栏自适应布局