CSS 简明教程 - 浮动属性 ( float ) - 简单教程，简单编程

浮动属性 float 可以让 HTML 元素向左或向右移动，直到其外边缘接触包含它的元素的边界，同时，浮动元素周围的其它元素也将重新排列

浮动的元素通常用在：

1.段落中的图像向左或向右浮动，以便文本环绕它们 2.制作现代页面布局

浮动属性 `float`

CSS 中的 float 属性可以浮动元素

float属性可选的值有四个

值	说明
left	元素在其父容器中向左浮动
right	元素在其父容器中向右浮动
none	默认，元素不浮动 ( 将显示在它在页面中本该出现的位置 )
inherit	该元素继承其父级的浮点值

下面的示例指定图像浮动到一段文本的左侧

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> 
<style>
span
{
    float:left;
    width:1.2em;
    font-size:400%;
    font-family:algerian,courier;
    line-height:80%;
}
</style>
<p>
这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
<span><img src="/static/icon/css_32x32.png" /></span>
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
<p>
在上面的段落中, 第一个字嵌入在span 元素中。
这个 span 元素的宽度是当前字体大小的1.2倍。
这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
文字的字体为"Algerian"。
</p>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

同样的，我们还可以指定图片浮动到一段文本的右侧

相邻的浮动元素

我们可以使用 float属性来水平排列元素，并使每个浮动元素彼此相邻

这样，我们就能实现一个简单的水平菜单

例如

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

我们还可以使用此功能实现水平图像列表并设置图像之间的间距，例如

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<style>
* {
    box-sizing: border-box;
}

.img-container {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
</style>
</head>
<body>

<h2>图像列表</h2>
<p>使用 CSS float 属性，非常简单的就能实现图片列表</p>

<div class="clearfix">
  <div class="img-container">
    <img src="img_fjords.jpg" alt="Fjords" style="width:100%">
  </div>
  <div class="img-container">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>

清除属性 `clear`

clear 属性指定元素的哪一侧不能有浮动元素

clear 属性的可选值有四个

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

下面的代码，我们使用 clear 属性在水平排列的图片列表中插入一段文本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单教程</title>
<style>
.thumbnail
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
.text_line
{
    clear:both;
    margin-bottom:2px;
}
</style>
</head>

<body>
<h3>照片列表</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

clear 属性还可以解决父容器中浮动元素溢出的问题

如果浮动元素 ( 如图像 ) 的高度大于父容器的高度，则浮动元素将不会完全包含在父容器中，我们可以使用 clear 属性来解决这个问题

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

下面的代码是一个完整的示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

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

.img2 {
    float: right;
}
</style>
</head>
<body>

<p>在此示例中，图像比包含它的元素高，并且它是浮动的，因此它溢出其容器外部：:</p>

<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">这是一段文本，一段文本，一段文本</div>

<p style="clear:right">这是一段文本，一段文本，一段文本</p>

<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">这是一段文本，一段文本，一段文本</div>

</body>
</html>

注意：关于 :after 的用法，我们会在后面的章节中学习到

CSS 简明教程 - 浮动属性 ( float )

浮动属性 float

相邻的浮动元素

清除属性 clear

浮动属性 `float`

清除属性 `clear`