关于CSS布局的一些理解

文章目录

• 关于浮动
• 关于BFC
• • 一、什么是BFC
  • 一、[w3c规范中的BFC定义](http://www.w3.org/TR/CSS2/visuren.html#block-formatting)：
  • 二、BFC元素所具有的特性
  • 三、BFC的创建
  • 四、BFC的应用
• 关于脱离文档流和恢复文档流
• • 一、文档流
  • • 1. 什么是文档流
    • 2. 什么是脱离文档流？
  • 二、怎么脱离文档流
  • • 1. float
    • 2. position

总所周知，CSS是样式层，两个作用一是实现布局，二是美化页面。作为初学者的我其实对布局这方面目前还不太理解，所以需要细致，持久，系统地理解，总结，运用它

关于浮动

​ 作用不用说都知道，用来实现并排，且并排的要浮动都要浮动，在一个浮动的大盒子中还可以设置浮动

​ 那么浮动的影响是什么呢？浮动的元素会跳出标准文档流，对后继元素产生影响。（顺便说一下后面会讲脱离文档流和恢复文档流帮助进行理解）

关于BFC

一、什么是BFC

一、w3c规范中的BFC定义：

浮动元素float和绝对或固定定位元素position: absolute or fixed ，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及==overflow值不为: visiable;==的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

即： BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

二、BFC元素所具有的特性

（1）在BFC中，盒子从顶端开始垂直地一个接一个地排列。

（2）盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

（3）在BFC中，每一个盒子的左外边距（margin-left）会触碰到容器的左外边缘（border-left），对于从右往左的格式来说，会触碰到右边缘。

（4）BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘。

（5）计算BFC高度BFC时，自然也会检测浮动的子盒子高度。

三、BFC的创建

float属性不为none；

overflow不为visible；

position属性为absolute或者fixed；

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

四、BFC的应用

1. 解决两种margin塌陷的问题
   • 垂直方向上的 两个元素各被一个BFC元素包裹
   • 父子嵌套方向上的 用四种方式创建BFC,实质就是触发盒子的bfc（block format context块级格式化上下文）来改变父级元素的渲染规则如何解决margin塌陷问题
2. 制作右侧自适应盒子——BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘

3. 清除元素之间的影响

   如果想让一个元素不受另一个元素的影响，可以把其中一个元素放到BFC环境中。例如：文本会围绕着浮动元素布局。如果我们不想让文本环绕，只想让文本位于右侧，只需要在文本外套一层元素，并且把这个元素变成BFC，这样文本就不会受到浮动元素的影响了。

4. 子盒子浮动后脱离文档流，即此时如果父盒子不设置一个高度，就无法被撑起来，紧接着后面的元素就会跟上来，而一般我们不设置高度，就让父盒子形成BFC

一些疑惑：四种方式为什么可以形成BFC？BFC真正的原理，为什么浮动形成BFC，却还要用BFC去清除浮动

答：都是基于BFC的定义和特性

关于脱离文档流和恢复文档流

一、文档流

1. 什么是文档流

将窗体自上而下 分成一行一行，并在每行中按照从左到右依次排放元素，称为文档流（normal stream又称普通流）。在html 中，html元素都是盒模型，盒子模型占用一定的空间，依次排放在html 中，形成了文档流。

2. 什么是脱离文档流？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

二、怎么脱离文档流

1. float

一个元素浮动时，其他内容会“环绕”该元素。

2. position

a. position：absolute;

绝对定位，absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

当父级元素的position全是static的时候，absolute是相对于html来进行定位的。

注意：绝对定位的窗口一般都要设置相对距离

b. position：fixed;

固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

参考链接：

浅谈BFC及其应用

脱离文档流和恢复文档流的方法

BFC的形成条件和特性分析

如何解决margin塌陷问题

感谢！