CSS学习笔记-常规流布局简介常规流布局指的是元素按照文档流自然排列的方式，即元素按照它们在 HTML 文档中的顺序从

简介

常规流布局指的是元素按照文档流自然排列的方式，即元素按照它们在 HTML 文档中的顺序从上到下、从左到右依次排列。

特点

自动排列：块级元素（如 <div>、<p>）默认独占一行，行内元素（如 <span>、<a>）与其他行内元素在同一行显示。
简单直观：不需要额外的 CSS 来创建布局，元素按照它们在 HTML 中的顺序自然排列。
响应式友好：通过使用百分比宽度和媒体查询等技术，可以创建响应式布局。

块级格式化上下文 BFC

定义

BFC 是一种隔离的独立容器，容器内的块级元素布局不会受到容器外元素的影响。
在 BFC 内部，块级元素按照从上到下的顺序垂直堆叠，而行内元素则按照从左到右的顺序水平排列。
BFC 内部的浮动元素不会影响 BFC 外部元素的布局。

创建 BFC 的方式

文档根元素（<html>）；
浮动元素（float不为none）；
绝对定位元素（position为absolute或fixed）；
行内块、表格、弹性、网格元素（display为inline-block、table、flex、grid）；
overflow不为visible或clip的块级元素。

应用场景

1. 解决外边距折叠问题

原因：CSS 的布局算法和 W3C 规范定义，目的是为了简化页面布局并减少不必要的空间浪费。
触发外边距折叠时：
解决外边距折叠后：

相邻块级元素的上下边距；

.container1 {
    background: yellow;
}

.child1 {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    background: pink;
    /* display: inline-block; */
}

.child2 {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    background: skyblue;
    /* float: left; */
    /* position: absolute; */
    /* display: inline-block; */
}

块级父元素的上边距与块级子元素的上边距或父元素的下边距与子元素的下边距；

.container2 {
    margin: 0;
    padding: 0px;
    border: none;
    background: red;
    margin-top: 10px;
    /* display: inline-block; */
    /* position: absolute; */
    /* overflow: auto; */
    /* float: left; */
    /* display: flex; */
}

.child3 {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin-top: 10px;
    /* float: left; */
    /* position: absolute; */
    /* display: inline-block; */
}

空的块级元素自身的上下边距。

.container3 {
    margin: 20px;
    background: yellow;
    /* display: inline-block; */
    /* overflow: auto; */
    /* display: flex; */
}

.child4 {
    background: skyblue;
}

2. 清除浮动影响

原因：浮动会使元素脱离正常的文件流，不再占据原有的空间位置，在父容器中水平排列。父元素的高度不会自动扩展以包含浮动元素，导致“高度塌陷”。同时会影响其后的非浮动元素，导致布局覆盖或错位。
清除浮动影响之前，父元素高度塌陷：
清除浮动影响之后：

父元素通过设置overflow属性来创建一个新的 BFC

.parent {
    overflow: hidden;
    /* overflow: auto; */
}

父元素通过伪元素设置clear: bath清除浮动
clear: bath：指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。

.parent::after {
    content: '';
    display: block;
    clear: both;
}

父元素最后添加一个空的子元素，为其设置clear: bath清除浮动影响

.clear-box {
    clear: both;
}

当子元素中同时存在非浮动元素时，其位置和内容会发生错位：

为非浮动元素设置clear: bath清除浮动影响

.box {
    clear: both;
}