520，自适应布局的思路（待补充）

Posted 2021-03-07 1998archer

左侧浮动或者绝对定位，右侧通过margin撑开

使用flex

使用<div>包含，然后靠margin形成bfc（百科：block formatting context块级格式化上下文

bfc是一个独立的渲染区域，只有block-level box参与，他规定了包括内部的block-level box如何布局，并且与这个区域外部毫不相干。

bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此，包括浮动和外边距合并等等，有了这些特性我们布局的时候就不会出现意外了情况了。

• 哪些情况下会产生bfc

display属性为block，list-item，table的元素，会产生bfc。（最常用的就是块级元素）

• 什么情况下会触发bfc

设置了float属性，并且不为none

position属性为absolute或者fixed

display为inline-block，table-cell，table-caption，flex，inline-flex

overflow属性不为visible

 

）