CSS教程
首页 > 开发 > 前端开发 > CSS教程 > CSS浮动

CSS浮动

一、CSS Float（浮动）

CSS的float属性用于定义元素在哪个方向上浮动，可以设置为left（向左浮动）或right（向右浮动）。当元素设置了浮动属性后，它会生成一个块级框，然后尽可能地向指定的浮动方向移动，直到其外边缘碰到包含框或其他浮动框为止。CSS Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，但它在布局时一样非常有用。float 属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘；

float 的可能值为：left或right或none：

  • left - 使左边缘接触包含块的左边缘或另一浮动块的右边缘；
  • right - 使右边缘接触包含块的右边缘或另一浮动块的左边缘；
  • none - 元素不浮动。

以下代码显示了float属性。

<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {
float: left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<p class="toggle">This is a test.</p>
<p class="toggle">This is a test.</p>
<p>This is a test.</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>

上面的代码呈现如下：

CSS Float（浮动）

二、元素浮动

当元素在水平方向上浮动时，它只会在左右方向上移动，而无法在上下方向上进行移动。浮动元素会尽量向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。其他元素会围绕浮动元素进行布局，而位于浮动元素之前的元素则不受影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

实例：

img
{
float:right;
}

三、相邻浮动元素

如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

实例：

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

四、清除浮动

默认情况下，浮动元素将堆叠在一起，为了避免这种情况，可以使用清除（clear）属性。clear 属性指定元素两侧不能出现浮动元素。clear属性指定浮动元素的一个或两个边缘必须不与另一个浮动元素的边缘邻接，其可能的值为：

  • left - 元素的左边缘可能不与另一个浮动元素邻接。
  • right - 元素的右边缘可能不与另一个浮动元素邻接。
  • both - 两边都不能与另一个浮动元素邻接。
  • none - 元素不被清除，并且任一边缘可以邻接另一个浮动元素。

以下代码显示了正在使用的clear属性。

<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {
float: left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
p.cleared {
clear: left;
}
</style>
</head>
<body>
<p class="toggle">This is a test.</p>
<p class="toggle cleared">This is a test.</p>
<p>This is a test.</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>

上面的代码呈现如下：

CSS Float（浮动）

使用 clear 属性往文本中添加图片廊：

实例：

.text_line
{
clear:both;
}

五、CSS所有浮动属性

CSS Float（浮动）

广告合作
QQ群号：707632017

温馨提示：

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。邮箱：2942802716#qq.com。（#改为@）

2、本站原创内容未经允许不得转裁，转载请注明出处“站长百科”和原文地址。

目录