浮动盒子布局 | 青训营

37 阅读1分钟

CSS布局是网页设计中的关键部分,合适的布局技巧能够为网页提供美观、简洁且灵活的外观。本文将介绍CSS中三种常用的布局技巧:浮动、定位和弹性盒子布局

一、浮动布局

浮动是一种常见的CSS布局技巧,通过设置元素的浮动属性,使元素脱离文档流,并根据指定的方向进行移动。浮动布局适用于以下场景:

  1. 实现多栏布局:通过将多个元素浮动到左侧或右侧,可以创建多列布局,如导航栏、侧边栏等。
  2. 图片与文本环绕:将图片浮动到一侧,使其周围的文本环绕其周围,提升排版效果。

实操实践:通过设置元素的float属性为leftright,并使用clear属性清除浮动,可以实现浮动布局。

image.png

image.png

清除标签: 额外标签法

image.png

image.png