CSS 布局 - 浮动实例

CSS 布局 - 浮动实例

本页提供常见的浮动案例。

网格 / 等宽的框

通过使用 float 属性，可以轻松地并排浮动内容框：

实例

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 50px; /* 如果需要在图片间增加间距 */
}

什么是 box-sizing？

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

您可以在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

图像并排

css_float_images_side.htm

这种框格（The grid of boxes）也可以用来并排显示图像：

实例

.img-container {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 5px; /* 如果需要在图片间增加间距 */
}

等宽的框

在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：

css_float_boxes_height.htm

实例

.box {
  height: 500px;
}

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

实例

使用 Flexbox 创建弹性框：

css_float_boxes_flex.htm

Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。

导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

实例

css_float_navigation_menu.htm

Web 布局实例

使用 float 属性完成整个 Web 布局也很常见：

css_layout_cols.htm

实例

.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%;
}

更多实例

带有边框和外边距的图像浮动到段落的右侧

让图像浮动到段落的右侧。在图像上添加边框和外边距。

<head>
<style>
img {
  float: right;
  border: 1px dotted black;
  margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
在下面的段落中，图像将向右浮动。黑色的虚线边框被添加到图像。
我们还为图像添加了外边距以将文本推离图像：
图像的上、右外边距为 0px，下外边距为 15px，左外边距为 20px。
</p>
<p><img src="/uploads/i/css/pineapple.jpg" width="188" height="267">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

带标题的图像浮动到右侧

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

<head>
<style>
div {
  float: right;
  width: 120px;
  margin: 0 0 15px 20px;
  padding: 15px;
  border: 1px solid black;
  text-align: center;
}
</style>
</head>
<body>
<div>
<img src="/uploads/i/css/pineapple.jpg" width="188" height="267"><br>CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，div 元素的宽度为 120 像素，其中包含图像。
div 元素将向右浮动。外边距被添加到 div 以将文本推离 div。
将边框和内边距（填充）添加到 div 中，以凸显图片和标题。
</p>
</body>

让段落的第一个字母向左浮动

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

<head>
<style>
span {
  float: left;
  width: 0.7em;
  font-size: 400%;
  font-family: algerian, courier;
  line-height: 80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，文本的第一个字母嵌入 span 元素中。
span 元素的宽度是当前字体大小的 0.7 倍。
span 元素的字体大小为 400％（很大），行高为 80％。
span 中字母的字体将是 "Algerian"。
</p>
</body>

用浮动创建一个网站

使用浮动创建带有水平导航栏、页眉、页脚、左侧导航栏和主要内容的首页。

<head>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.header {
  background-color: #2196F3;
  color: white;
  text-align: center;
  padding: 15px;
}
.footer {
  background-color: #444;
  color: white;
  padding: 15px;
}
.topmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #777;
}
.topmenu li {
  float: left;
}
.topmenu li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
.topmenu li a:hover {
  background-color: #222;
}
.topmenu li a.active {
  color: white;
  background-color: #4CAF50;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.sidemenu {
  width: 25%;
}
.content {
  width: 75%;
}
.sidemenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.sidemenu li a {
  margin-bottom: 4px;
  display: block;
  padding: 8px;
  background-color: #eee;
  text-decoration: none;
  color: #666;
}
.sidemenu li a:hover {
  background-color: #555;
  color: white;
}
.sidemenu li a.active {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>
  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Shanghai</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>
<div class="footer">
  <p>Footer Text</p>
</div>
</body>

所有 CSS 浮动属性

属性	描述
box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear	指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float	指定元素应如何浮动。
overflow	指定如果内容溢出元素框会发生什么情况。
overflow-x	指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y	指定当溢出元素的内容区域时，如何处理内容的上/下边缘。