CSS 布局 - float 浮动

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

左浮动

右浮动

float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

实例 - float: right;

下例指定图像应在文本中向右浮动：

Pineapple 菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。

菠萝原产于南美洲巴西、巴拉圭的亚马逊河流域一带，16世纪从巴西传入中国。已经流传到整个热带地区。其可食部分主要由肉质增大之花序轴、螺旋状排列于外周的花组成，花通常不结实，宿存的花被裂片围成一空腔，腔内藏有萎缩的雄蕊和花柱。叶的纤维甚坚韧，可供织物、制绳、结网和造纸。

实例

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
<h1>向右浮动</h1>
<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>
<div style="border: 1px solid #ccc!important;padding:10px"><p><img src="/znadmin/md/1239/0.jpg" alt="Pineapple" style="width:170px;height:170px;float:right;margin-left:15px;">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</p>
<p> 菠萝原产于南美洲巴西、巴拉圭的亚马逊河流域一带，16世纪从巴西传入中国。 已经流传到整个热带地区。其可食部分主要由肉质增大之花序轴、螺旋状排列于外周的花组成，花通常不结实，宿存的花被裂片围成一空腔，腔内藏有萎缩的雄蕊和花柱。叶的纤维甚坚韧，可供织物、制绳、结网和造纸。</p></div>
</body>
</html>

运行一下

实例 - float: left;

下例指定图像应在文本中向左浮动：

Pineapple 菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。

实例

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>
<h1>向左浮动</h1>
<p>在本例中，图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
<div style="border: 1px solid #ccc!important;padding:10px"><p><img src="/znadmin/md/1239/0.jpg" alt="Pineapple" style="width:170px;height:170px;float:left;margin-right:15px;">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</p>
<p> 菠萝原产于南美洲巴西、巴拉圭的亚马逊河流域一带，16世纪从巴西传入中国。 已经流传到整个热带地区。其可食部分主要由肉质增大之花序轴、螺旋状排列于外周的花组成，花通常不结实，宿存的花被裂片围成一空腔，腔内藏有萎缩的雄蕊和花柱。叶的纤维甚坚韧，可供织物、制绳、结网和造纸。</p></div>
</body>
</html>

运行一下

实例 - No float

在下例中，图像将显示在文本中刚出现的位置（float: none;）：

Pineapple 菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。

实例

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: none;
}
</style>
</head>
<body>
<h1>没有浮动</h1>
<p>在本例中，图像将显示在文本中刚出现的位置（float: none;）。</p>
<div style="border: 1px solid #ccc!important;padding:10px"><p><img src="/znadmin/md/1239/0.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</p>
<p> 菠萝原产于南美洲巴西、巴拉圭的亚马逊河流域一带，16世纪从巴西传入中国。 已经流传到整个热带地区。其可食部分主要由肉质增大之花序轴、螺旋状排列于外周的花组成，花通常不结实，宿存的花被裂片围成一空腔，腔内藏有萎缩的雄蕊和花柱。叶的纤维甚坚韧，可供织物、制绳、结网和造纸。</p></div>
</body>
</html>

运行一下

连续浮动

通常，div元素将显示在彼此的顶部。但是，如果我们使用 float:left，我们可以让元素彼此相邻地浮动：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  float: left;
  padding: 15px;
}
.div1 {
  background: red;
}
.div2 {
  background: yellow;
}
.div3 {
  background: green;
}
</style>
</head>
<body>
<h2>连续浮动</h2>
<p>在这个实例里，3个 div 降连续浮动连成一排</p>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>

运行一下

CSS 布局 - float 浮动

CSS 布局 - 浮动和清除

float 属性

实例 - float: right;

实例

实例 - float: left;

实例

实例 - No float

实例

连续浮动

分类导航