.element { float: left; / 或者 'right' /}利用场景笔墨环抱图片。创建水平导航栏。无网格系统时的列布局。把稳事变打消浮动（Clearing Floats）：利用clear属性可以防止元素被浮动元素覆盖。
.clear-element { clear: both; / 可以是 'left', 'right', 或 'both' /}包含浮动（Containing Floats）：浮动元素的父容器可能不会扩展以包含浮动的子元素，可以通过打消浮动或利用其他技能（如overflow）来办理这个问题。浮动塌陷（Float Collapse）：浮动元素不霸占空间，可能导致父元素高度塌陷。定位（Position）
定位属性许可你掌握元素的位置，它可以是相对付它的正常位置、相对付最近的已定位先人元素、相对付视口或绝对位置。
.element { position: static | relative | absolute | fixed | sticky;}利用场景相对定位（Relative Positioning）：元素相对付其正常位置进行偏移。
.relative-element { position: relative; top: 10px; left: 20px;}绝对定位（Absolute Positioning）：元素相对付最近的已定位父元素进行定位。
.absolute-element { position: absolute; top: 0; right: 0;}固定定位（Fixed Positioning）：元素相对付视口进行定位，纵然页面滚动也不会移动。
.fixed-element { position: fixed; bottom: 0; left: 0;}粘性定位（Sticky Positioning）：元素基于用户的滚动位置在相对和固定定位之间切换。
.sticky-element { position: sticky; top: 10px;}把稳事变定位元素可能会分开文档流，影响周围元素的布局。z-index属性可以掌握堆叠顺序。绝对定位元素的容器应有position: relative;，以便精确定位。显示（Display）
display属性是CSS中最主要的用于掌握布局的属性之一，它定义了元素如何显示在页面上。
.element { display: block | inline | inline-block | flex | grid | none;}利用场景块级元素（Block）：display: block;使元素表现为块级，霸占新的行。
.block-element { display: block;}内联元素（Inline）：display: inline;使元素在文本行中显示，不开始新行。
.inline-element { display: inline;}内联块元素（Inline-Block）：display: inline-block;许可元素并排排列，同时拥有块级元素的宽度和高度属性。
.inline-block-element { display: inline-block;}弹性盒子（Flex）：display: flex;创建了一个弹性容器，其子元素可以灵巧地在容器内排列。
.flex-container { display: flex;}网格（Grid）：display: grid;创建了一个网格容器，可以定义行和列以及在网格内放置元素。
.grid-container { display: grid;}隐蔽元素（None）：display: none;将元素隐蔽，且不为元素保留空间。
.hidden-element { display: none;}把稳事变利用display: none;与visibility: hidden;的差异在于后者仍保留元素霸占的空间。display: flex;和display: grid;为当代布局供应了更多掌握，常日比浮动和定位更优。示例HTML构造
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Float, Position, and Display Example</title><link rel="stylesheet" href="styles.css"></head><body><div class="header"> <div class="logo">Logo</div> <div class="navigation">Navigation</div></div><div class="main-content"> <div class="sidebar">Sidebar</div> <div class="content">Content</div></div><div class="footer">Footer</div><div class="fixed-element">Fixed Element</div></body></html>CSS样式
/ Reset some default styles /body, h1, p { margin: 0; padding: 0;}/ Header styles /.header { background-color: #f8f8f8; border-bottom: 1px solid #e7e7e7; padding: 10px; overflow: hidden; / Clearfix for floated elements /}.logo { float: left; font-size: 24px;}.navigation { float: right; font-size: 18px;}/ Main content styles /.main-content { padding: 20px;}.sidebar { float: left; width: 200px; background-color: #ddd; padding: 10px;}.content { margin-left: 220px; / Make space for the sidebar / background-color: #eee; padding: 10px;}/ Footer styles /.footer { background-color: #f8f8f8; border-top: 1px solid #e7e7e7; text-align: center; padding: 10px; position: relative; / For demonstration purposes / top: 20px; / Move the footer down a bit /}/ Fixed element styles /.fixed-element { position: fixed; bottom: 10px; right: 10px; padding: 5px 10px; background-color: #333; color: #fff; z-index: 1000; / Ensure it stays on top /}/ Clearfix hack /.clearfix::after { content: ""; clear: both; display: table;}
在这个例子中，我们创建了一个包含头部、侧边栏、紧张内容和页脚的基本布局。我们利用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还利用了相对定位来轻微下移页脚，并利用固定定位为页面添加了一个始终可见的固定元素。末了，我们利用了overflow: hidden;来打消头部中浮动元素的影响。
结语浮动、定位和显示属性是CSS中构建繁芜布局的强大工具。通过深入理解和精确运用这些属性，前端工程师可以创建出既都雅又功能强大的网页。随着Web标准的不断发展，我们也须要不断学习温柔应新的CSS特性，以保持我们技能的前沿性。
