BFC规范:
- 父容器是一个独立的容器。
2. 子容器无论怎么折腾,都不影响外面的布局。触发BFC规范:
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)BFC应用及特性:
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题
- 经典布局:两列布局 ( 一列固定宽,一列自适应 )
box1{ width:200px; height:200px; background:red; float:left; }
#box2{ height:600px; background:blue; margin-left: 200px;}
让固定大小容器上下左右居中
position:absolute; left:50%; top:50%; margin:负的宽高的一半
让不固定大小容器上下左右居中
position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;
下一篇:笔记1-2_9 布局