注意：曾全职考公，空窗期一年，沉淀学习，重返赛道。
注意：有理解错、说错的地方，请各路大佬留言讨论，我好改进，感谢！！！

float

1. 圣杯布局

圣杯布局是一种三列布局，中间宽度自适应，两边定宽。它通过将整个布局看作一个奖杯，左右两侧视为奖杯的耳朵（即定宽部分），中间部分则视为奖杯的主体（即自适应宽度部分）。

中间栏优先渲染：中间栏被放置在 HTML 文档的较前位置，优先被浏览器渲染。
两边定宽：左右两侧栏的宽度是固定的，不随浏览器窗口大小的变化而变化。
中间自适应：中间栏的宽度会根据浏览器窗口的剩余空间自动调整，以适应不同的屏幕尺寸。

实现原理

主要依赖于 CSS 的浮动（float）、负边距（negative margin）和相对定位（relative positioning）等。

浮动与负边距：
- 将中间栏、左栏和右栏都设置为左浮动 float: left。
- 给左栏和右栏设置 margin-left/right: 负值(值的绝对值为各自栏目的宽度)，以确保它们移动到并且紧贴中间栏的两侧。
相对定位：
- 在某些情况下，可以使用相对定位 position: relative 来微调左右栏的 left 或 right 属性，从而调整左栏和右栏的位置。
父容器 padding：
- 给父容器设置左右 padding，改变了视觉上的布局效果，并没有改变 DOM 结构中的实际布局顺序。

代码实现

/* css */
#container {
    padding-left: 200px;
    padding-right: 150px;
#container .item {
    float: left;
}
#center {
    width: 100%;
}
#left {
    width: 200px;
    margin-left: -100%; /* 移动到上一行，也就是 center 的位置 */
    position: relative; /* 根据自身来定位 */
    right: 200px; /* 向左移动 200px，刚好贴紧父元素的左边 */
}
#right {
    width: 150px;
    margin-right: -150px; /* 移动到 center 右边的位置，贴紧父元素的右边 */
    /* 负值等于元素宽度，而右侧又无元素，该元素会向上行移动，下面的元素会顶上去 */
}

/* html */
<div id="container">
    <div id="center" class="item">center</div>
    <div id="left" class="item">left</div>
    <div id="right" class="item">right</div>
</div>

优缺点

优点：
- 不需要添加额外的 DOM 节点：与双飞翼布局相比，圣杯布局不需要在 HTML 结构中添加额外的容器来包裹中间栏。
- 易于实现：通过简单的 CSS 样式就可以实现复杂的布局效果。
缺点：
- 浏览器兼容性：在某些旧版浏览器中可能存在兼容性问题。
- 布局稳定性：当浏览器窗口宽度过小或中间栏内容过多时，可能会出现布局混乱的情况。特别是当中间栏的宽度小于左栏或右栏的宽度时，布局可能会“破碎”。

2. 双飞翼布局

双飞翼布局主要特点是实现三列布局，其中左右两列的宽度固定，而中间一列的宽度自适应。这种布局方式结合了float布局和负边距技巧，以达到所需的布局效果。

中间栏优先渲染
两边定宽
中间自适应

实现原理

主要依赖于 CSS 的浮动（float）、负边距（negative margin）。

浮动与负边距：
- 将中间栏、左栏和右栏都设置为左浮动 float: left。
- 给左栏和右栏设置 margin-left: 负值(值的绝对值为各自栏目的宽度)，以确保它们移动到并且紧贴中间栏的两侧。
中间内容 margin：
- 给中间内容设置左右 margin，改变了视觉上的布局效果，并没有改变 DOM 结构中的实际布局顺序。

代码实现

/* css */
.item {
    float: left;
}
#center {
    width: 100%;
}
#main-center {
    margin: 0 150px 0 200px; /* 给左右两侧留白 */
}
#left {
    width: 200px;
    margin-left: -100%; /* 移动到上一行，刚好贴紧父元素的左边 */
}
#right {
    width: 150px;
    margin-left: -150px; /* 移动到 center 右边的位置，贴紧父元素的右边 */
}

/* html */
<div id="main" class="item">
    <div id="main-center">center</div>
</div>
<div id="left" class="item">left</div>
<div id="right" class="item">right</div>

优缺点

优点：
- 灵活性高：双飞翼布局能够灵活地适应不同屏幕尺寸和分辨率，提高网页的可访问性和用户体验。
- 兼容性好：双飞翼布局主要依赖于 CSS 的浮动和负边距属性，这些属性在大多数现代浏览器中都有良好的支持。
缺点：
- 实现复杂：相比于其他布局方式（如 flex 或 grid 布局），双飞翼布局的实现过程较为复杂，需要一定的 CSS 知识和技巧。
- 维护困难：由于双飞翼布局依赖于负边距等技巧来实现布局效果，因此在维护和修改时可能会遇到一些困难。

圣杯布局和双飞翼布局的区别

前者左栏使用 margin-left: 负值，右栏使用 margin-right: 负值；后者左右栏都使用 margin-left: 负值。
为了在视觉上留出左栏和右栏的空间，前者的父元素使用 padding，后者的中间内容(main)使用 margin。

3. clearfix

用于解决浮动元素导致父元素高度塌陷问题。它通常用于浮动布局中，其中元素浮动以水平堆叠，但浮动元素不再占据文档流中的空间，导致父元素无法正确计算其高度，进而引发高度塌陷问题。

实现方式

clearfix 的实现通常依赖于 CSS 的伪元素 :after 和 clear 属性。

/* css */
.clearfix::after {  
    content: "";
    display: table; /* 作用是为伪元素提供一个表格的显示类型 */
    clear: both; /* 明确指示伪元素必须清除其两侧的浮动元素 */
}

作用

解决高度塌陷问题：浮动元素不再占据文档流中的空间，导致父元素无法正确计算其高度。clearfix 通过使父元素包含浮动元素的高度，从而解决高度塌陷问题。
简化布局：在浮动布局中，通常需要添加额外的清除浮动元素（如 <div style="clear: both;"></div> ），而 clearfix 则通过 CSS 类的方式简化了这一过程，使布局更加清晰和易于维护。

注意事项

浏览器兼容性：虽然现代浏览器普遍支持 clearfix 技术，但在使用前仍需考虑目标用户的浏览器环境，确保兼容性。
性能影响：虽然 clearfix 对性能的影响通常很小，但在大型项目中仍需注意其对渲染性能的可能影响。
替代方案：随着 CSS 布局技术的发展，如 flex 和 grid 布局的普及，浮动布局的使用逐渐减少。因此，在可能的情况下，可以考虑使用这些更现代的布局技术来替代 clearfix。

努力学习，天天向上（CSS布局第二篇）

目录

float

1. 圣杯布局

实现原理

代码实现

优缺点

2. 双飞翼布局

实现原理

代码实现

优缺点

圣杯布局和双飞翼布局的区别

3. clearfix

实现方式

作用

注意事项