浮动以及导航条和简单布局!!!(12.29日)

一、浮动（float）：脱离文档流的布局方式

浮动是 CSS 中重要的布局方式，通过设置**float属性使元素脱离文档流**，使元素不再具有它原有的特点, 从而让页面布局会发生变化，实现块元素水平排列。

1. 浮动的基础语法

float：；

可选值：

none 默认值，不浮动

left 向左浮动

right 向右浮动

css 复制代码

.box {
  /* 浮动核心属性 */
  float: none; /* 默认值，不浮动，保持文档流默认排列 */
  float: left; /* 向左浮动 */
  float: right; /* 向右浮动 */
}

2. 浮动的核心特性

css 复制代码

#box {
  width: 500px;
  height: 400px;
  background-color: #ccc;
  margin: 100px auto;
}
/* 公共样式提取，提高复用性 */
.box {
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: red;
  float: left; /* 向左浮动，脱离文档流 */
}
.box2 {
  width: 150px;
  height: 150px;
  background-color: green;
  /* 未设置浮动，保留在文档流中 */
}
.box3 {
  background-color: orange;
}
.box4 {
  background-color: pink;
}

浮动六大核心特点

浮动方向局限于祖先元素内部，仅能向左 / 向右浮动，不会超出父元素范围；
元素浮动，会使元素脱离文档流，元素原来在文档流中的位置就会丢失，

浮动元素下面的元素就会跑上去
若浮动元素上方是未浮动的块元素，未浮动元素会遮挡浮动元素；
浮动元素会紧贴上一个元素后面，不会跑到前一个元素前方；
浮动元素不会覆盖****文字，文字会自动环绕浮动元素；
块元素浮动后，宽度默认由内容撑开（脱离文档流后块元素特性失效）。

3. 浮动的核心作用(总结)

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列

通过浮动可以制作一些水平方向的布局

二、浮动实战 1：导航条布局

导航条是网页高频组件，利用浮动实现导航项水平排列，结合line-height实现文字垂直居中。

css 复制代码

<ul class="nav">
  <li>
    <a href="#">HTML/CSS</a>
  </li>
  <li>
    <a href="#">Browser Side</a>
  </li>
  <li>
    <a href="#">Server Side</a>
  </li>
  <li>
    <a href="#">programming</a>
  </li>
  <li>
    <a href="#">xml</a>
  </li>
  <li>
    <a href="#">web building</a>
  </li>
  <li class="h">
    <a href="#">reference</a>
  </li>
</ul>

导航条布局关键技巧

重置默认样式：list-style: none去除列表圆点，text-decoration: none去除链接下划线；
列表项float: left实现水平排列，避免行内块的三像素空白问题；
line-height: 48px与导航条高度一致，实现文字垂直居中；
悬浮时修改背景色和文字色，提升交互体验。

三、浮动实战 2：页面分栏布局

利用浮动实现经典的「左 - 中 - 右」三栏布局，结合版心类统一控制页面宽度。

css 复制代码

* {
  margin: 0;
  padding: 0;
}
/* 版心类：统一控制页面宽度，水平居中 */
.w {
  width: 1000px;
  margin: 0 auto;
}
header {
  height: 100px;
  background-color: greenyellow;
}
main {
  height: 400px;
  background-color: orange;
}
/* 左侧栏 */
.left {
  width: 200px;
  height: 400px;
  background-color: aqua;
  float: left;
}
/* 中间栏：左右margin实现间距 */
.center {
  width: 580px;
  margin: 0 10px; /* 左右各10px间距，总宽度200+580+200+10+10=1000px */
  height: 400px;
  background-color: blueviolet;
  float: left;
}
/* 右侧栏 */
.right {
  width: 200px;
  height: 400px;
  background-color: pink;
  float: left;
}
footer{
  height: 100px;
  background-color: #ccc;
}

三栏布局关键技巧

版心类.w统一控制页面宽度，margin: 0 auto实现水平居中；
三栏均设置float: left实现水平排列，宽度之和 + 间距 = 版心宽度（200+580+200+10+10=1000px）；
中间栏通过margin: 0 10px实现与左右栏的间距，避免元素重叠；
页脚未浮动，不受浮动元素影响，保持正常文档流排列。

四、浮动布局核心注意事项

浮动元素父元素高度塌陷：若父元素未设置固定高度，子元素全部浮动后，父元素高度会变为 0（后续需通过清除浮动解决）；
浮动元素宽度计算：块元素浮动后，宽度默认由内容撑开，需手动设置宽度避免布局错乱；
间距控制 ：水平排列的浮动元素，通过margin控制间距，需保证宽度 + 间距之和≤父元素宽度；
文字环绕：利用浮动元素不覆盖文字的特性，可实现图文环绕布局。

总结

浮动是 CSS 布局的核心手段之一，需重点掌握：

浮动的六大核心特性，理解「脱离文档流」对元素排列的影响；
浮动实现导航条的关键：列表项float: left+line-height垂直居中；
三栏布局的核心：浮动元素宽度 + 间距之和等于父元素宽度，避免溢出；
浮动布局的常见问题（父元素高度塌陷）需后续结合「清除浮动」解决。