网站建设初期目标杭州市建筑业协会官网
浮动
HTML浮动（Float）是一种CSS布局技术，通过float: left或float: right使元素脱离常规文档流并向左/右对齐，常用于图文混排或横向排列内容。浮动元素会紧贴父容器或相邻浮动元素的边缘，但脱离文档流后可能导致父容器高度塌陷，需通过伪元素添加clear: both来修复。传统布局中，浮动被用于多栏设计或导航菜单，但因需手动计算宽度且适配性差，逐渐被Flexbox和Grid布局替代。使用浮动时需注意元素间的间距控制，避免内容重叠；现代开发中建议优先选择更直观的弹性或网格布局，仅保留浮动用于简单的文本环绕场景，如图片与文字的自然排版。
浮动的核心特性
通过元素脱离文档流，实现水平对齐，常见于图文混排或多元素横向排列。浮动元素紧贴父容器或相邻元素边缘，但会导致父容器高度塌陷，需用clear: both清除浮动。
脱离文档流
HTML脱离文档流指元素（如float、fixed定位）不再占据常规布局空间，父容器可能高度塌陷，后续元素会填补其位置，需手动调整布局或清除浮动避免错位，常见于悬浮层、弹窗等场景。
<div class="float-box"></div>
<p>文字内容将围绕浮动元素排列...</p><style>
.float-box {float: left;width: 150px;height: 150px;background: skyblue;margin-right: 20px;
}
</style>
此代码效果：蓝色方块浮动后，段落文字自动环绕
元素自动转为块级元素
HTML元素通过设置display:block或特定属性（如float、position:absolute/fixed）转为块级，独占一行且可设置宽高，如默认块级元素<div>或行内元素<span>被强制转换后的表现。
span {float: left; /* 行内元素变为块级 */width: 200px; /* 原本无效的属性生效 */
}经典布局
HTML经典布局依赖表格、浮动或定位实现，但代码响应式适配差，需手动计算尺寸，现逐渐被Flex/Grid布局取代，适用于传统网页适配场景。
两栏布局
两栏布局是页面被分成左右两个主要区域。一个常见的例子是左侧为导航栏，右侧为主要内容区。
如图所示，这就是一个经典的两栏布局
<div class="box"><div class="left">左栏</div><div class="right">右栏</div>
</div><style>
.left {float: left;width: 200px;background: #ffe4b5;
}
.right {float: right;width: 150px;background: #98fb98;
}
</style>此代码就是一个正常的两栏布局框架
三栏布局
三栏布局增加了中间的内容区，两边可以作为侧边栏使用。这种布局适合内容较多且需要分类展示的网页。
如图所示，这就是一个经典的三栏布局，HTML元素按照它们在HTML文档中的顺序从上到下、从左到右依次排列的方式。每个块级元素默认占据一整行，而内联元素则在同一行内连续排列直到没有足够的空间为止。通过改变元素的display、position等属性，我们可以调整元素的位置和排列方式，但这些操作都是基于标准文档流进行的。
<div class="box"><div class="left">左栏</div><div class="right">右栏</div><div class="main">主内容区</div>
</div><style>
.left {float: left;width: 200px;background: #ffe4b5;
}
.right {float: right;width: 150px;background: #98fb98;
}
.main {margin: 0 160px 0 210px; /* 间距设置 */
}
</style>此代码就是一个正常的三栏布局框架
display 属性
display属性定义元素的显示模式，控制元素排列方式及子元素布局规则，例如display: none可隐藏元素。
display属性用于定义元素生成的框的类型：
block元素前后换行显示，宽度默认占满父容器。
inline元素不换行显示，只占用其内容所需的空间。
inline-block元素不会独占一行，但是它可以设置高度和宽度。
none元素不生成任何框，即该元素不会显示。
float 属性
float属性它主要用于图像环绕文本效果或创建多列布局如：使元素向左/右浮动，脱离文档流，实现图文混排或横向布局；需用clear清除浮动避免父容器高度塌陷。
left元素向左浮动。
right元素向右浮动。
none默认值，元素不会浮动
.image-left {float: left;
}
.image-right {float: right;
}clear 属性
HTML的clear属性用于清除元素两侧的浮动影响，防止被浮动元素环绕，通常加在需恢复文档流的元素上，如clear: both解决父容器高度塌陷，适配传统浮动布局场景。
clear属性用于阻止父元素内的子元素环绕浮动元素。
left不允许元素左边有浮动元素。
right不允许元素右边有浮动元素。
both不允许元素左右两边都有浮动元素。
none默认值，允许元素四周有浮动元素。
清除浮动
HTML清除浮动解决父容器高度塌陷，常用方法：添加空元素clear:both，父级overflow:hidden现代布局推荐Flex/Grid替代浮动。
清除
在浮动元素后面添加一个空的<div>标签，并设置clear:both 。
<div style="clear: both"></div>BFC触发
为父容器设置overflow: hidden
.box {border: 3px solid #48dbfb;margin-bottom: 30px;padding: 10px;overflow: hidden; /* 关键代码：触发BFC */
}浮动与现代布局对比
| 特性 | Float | Flexbox | Grid |
|---|---|---|---|
| 布局维度 | 一维 | 一维 | 二维 |
| 响应式支持 | 需要媒体查询 | 内置弹性 | 内置响应 |
| 内容流控制 | 破坏文档流 | 保持文档流 | 保持文档流 |
| 浏览器兼容性 | 全支持 | IE10+ | IE11+ |
总结
HTML浮动（Float）是CSS早期核心布局技术，通过float: left/right使元素脱离文档流并向指定方向对齐，常用于实现图文混排（如图片文字环绕）或多栏布局。浮动元素会紧贴父容器或相邻浮动元素边缘，但脱离文档流的特性会导致父容器高度塌陷（不包含浮动元素高度），需通过以下方式解决：
- 清除浮动：在父容器末尾添加clear: both的空元素；
- BFC触发：为父容器设置overflow: hidden；
浮动布局需手动计算宽度且响应式适配困难，现代开发中更推荐Flexbox或Grid布局替代，仅保留简单场景（如文本环绕图片）使用。