码农教程 - 一技在手,衣食无忧! tools

目录

CSS 布局 - 浮动示例

❮ 上一节 下一节 ❯

此页面包含常见的浮动示例。

盒子网格/等宽盒子

盒子1

盒子2


盒子1

盒子2

方框3

随着float属性，很容易并排浮动内容框：

示例

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}
亲自试一试 »

什么是盒子尺寸？

您可以轻松地并排创建三个浮动框。但是，当您添加一些东西来扩大每个框的宽度（例如内边距或边框）时，框就会破裂。这box-sizing属性允许我们将内边距和边框包含在框的总宽度（和高度）中，确保内边距保留在框内并且不会破坏。

您可以在我们的文章中阅读有关 box-sizing 属性的更多信息CSS 框大小调整章节。

并排图片

Italy
Forest
Mountains

框网格也可用于并排显示图片：

示例

.img-container {
  float: left;
  width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
  padding: 5px; /* if you want space between the images */
}
亲自试一试 »

等高盒子

在前面的示例中，您学习了如何以相等的宽度并排浮动框。然而，创建等高的浮动盒子并不容易。然而，一个快速解决方法是设置固定高度，如下例所示：

盒子1

一些内容，一些内容，一些内容

盒子2

一些内容，一些内容，一些内容

一些内容，一些内容，一些内容

一些内容，一些内容，一些内容

示例

.box {
  height: 500px;
}
亲自试一试 »

然而，这不太灵活。如果您能保证盒子中的内容始终相同，那就可以了。但很多时候，内容并不一样。如果您在手机上尝试上面的示例，您将看到第二个框的内容将显示在框外。这就是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动将盒子拉伸到与最长的盒子一样长：

示例

使用弹性盒创建灵活的盒子：

框 1 - 这是一些文本，以确保内容变得非常高。这是一些文本，以确保内容变得非常高。这是一些文本，以确保内容变得非常高。
框 2 - 我的身高将遵循框 1。
亲自试一试 »

提示：您可以在我们的文章中阅读有关 Flexbox 布局模块的更多信息CSS Flexbox 章节。

导航菜单

您还可以使用float使用超链接列表来创建水平菜单：

示例

亲自试一试 »

网页布局示例

使用以下方法进行整个网页布局也很常见float属性：

示例

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

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

.menu {
  width: 25%;
}

.content {
  width: 75%;
}
亲自试一试 »

更多示例

带有边框和边距的图片在段落中向右浮动
让图片在段落中浮动到右侧。为图片添加边框和边距。

带有向右浮动标题的图片
让带有标题的图片向右浮动。

让段落的第一个字母向左浮动
让段落的第一个字母向左浮动并设置字母样式。

创建一个带有浮动的网站
使用 float 创建一个带有导航栏、页眉、页脚、左侧内容和主要内容的主页。

所有 CSS 浮动属性

Property Description
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not
clear Specifies what should happen with the element that is next to a floating element
float Specifies whether an element should float to the left, right, or not at all
overflow Specifies what happens if content overflows an element's box
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

❮ 上一节 下一节 ❯