前端学习之布局

浮动和清除浮动解决方案

HTML结构示例

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS实现方法

.left {
  float: left;
  width: 50%;
}

.right {
  float: left;
  width: 50%;
}

.wrap::after {
  content: "";
  display: table;
  clear: both;
}

关键点说明

• 浮动元素需要设置宽度，否则可能出现布局异常
• ::after伪元素清除浮动是现代最推荐的方式
• 清除浮动的原理是在容器末尾创建不可见元素来阻断浮动

固定定位解决方案

CSS完整代码

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
}

特性说明

• fixed定位基于视口而非文档流
• 需要显式指定top和left值确定位置
• 固定定位元素会脱离常规文档流

学习要点对比

浮动定位特点

• 最初设计用于文字环绕效果
• 浮动元素会脱离普通流但保留部分流动性
• 需要处理父容器高度塌陷问题

固定定位特点

• 位置相对于浏览器窗口保持不变
• 不随页面滚动而移动
• 常用于导航栏、悬浮按钮等场景

实际应用建议

• 现代布局推荐优先考虑flexbox/grid
• 浮动布局仍适用于传统浏览器支持需求
• 固定定位要注意移动设备视口差异