布局和BFC

Posted 2020-09-24

块级格式化上下文 BFC

是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。目前除了IE6-7外其他浏览器均支持BFC。在CSS3中BFC叫做Flow Root。 与普通容器相比，BFC元素可以看作是隔离了的独立容器，内部的元素不会在布局上影响外面元素。

如何形成BFC

满足任意下面条件的元素可形成BFC： 1. 浮动元素，float除了none外的值 2. 绝对定位元素，position:absolute/fixed 3. display为 inline-block , table-cells , table-captions之一 4. overflow为visiable之外的值（hidden,auto,scroll） display:table本身不产生BFC，而是由它产生匿名框，包含display:table-cell的框产生BFC。 注意：BFC并不是元素，而是元素带有的一些属性，因此上面元素是产生了BFC，而他们本身并不是BFC。

BFC的作用

整体上看，BFC的作用是隔离了容器，具体有三个表现： 整体上看，BFC的作用是隔离了容器，具体有三个表现： 这是使用overflow:hidden方法闭合浮动的原理，W3C原文："‘Auto‘ heights for block formatting context roots"，就是BFC会根据子元素情况自动适应高度，使子元素包含浮动 注意：IE6-7不支持BFC，需要出发hasLayout闭合浮动

<div style="border:1px solid #00F;overflow:hidden;width:300px;"> <div style="float:left;background:#939;">我的父元素是 BFC</div> </div> <div style="line-height:3em;"> ----------我是华丽分割线----------- </div> <div style="border:1px solid gray;width:300px;"> <div style="float:left;background:#3C6;">我的父元素不是 BFC</div> </div>

2.

BFC可以组织元素被浮动元素覆盖 浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一行，这样会被浮动元素覆盖，为该兄弟元素形成BFC可以组织被覆盖。

<div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮动元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;"> 我是非浮动元素，并且没有创建 BFC </div> <div style="line-height:3em;"> ----------我是华丽分割线----------- </div> <div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮动元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;display:inl ine-block;"> 我是非浮动元素，创建了 BFC </div>

 

3.

BFC可以阻止父子元素的margin折叠 当且仅当两个块级元素毗邻并且在同一块级格式化上下文时，他们垂直方向之间的外边距才会折叠。也就是说，及时两个块级元素毗邻，当不在同一个BFC时，它们的边距不会折叠。

<div style="margin-top:20px;background:yellow;width:300px;"> <div style="margin-top:20px;"> 我的上外边距是 20px，父级元素不是 BFC </div> </div> <div style="line-height:3em;"> ----------我是华丽分割线-----------</div> <div style="margin-top:20px;background:yellow;overflow:auto;width:300px;"> <div style="margin-top:20px;"> 我的上外边距是 20px，父级元素是 BFC </div> </div>

4.页面布局

 

静态布局（Static Layout） 即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。 自适应布局（Adaptive Layout） 是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 你可以把自适应布局看作是静态布局的一个系列。

流式布局（Liquid Layout） （也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

响应式布局（Responsive Layout） 分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。