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
两栏自适应布局