CSS float浮动
2021-06-25 本文已影响0人
微语博客
浮动
CSS的float属性设置HTML元素的浮动类型，设置HTML元素向左或向右移动，其周围的元素也会重新排列。浮动往往是用于图像，但它在布局时一样非常有用。
元素如何浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
div{
background-color: azure;
height: 40px;
width: 400px;
}
</style>
</head>
<body>
<div>这是第1个div</div><!--浮动前的元素正常排列-->
<div style="float: right;">这是第2个div</div><!--设置浮动的元素依次浮动排列-->
<div style="float: right;">这是第3个div</div>
<div>这是第4个div</div><!--浮动后面的元素重新排列-->
<div>这是第5个div</div>
</html>
相邻的浮动元素会依次靠拢排列
清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
div{
background-color: azure;
height: 40px;
width: 400px;
}
</style>
</head>
<body>
<div>这是第1个div</div><!--正常排列-->
<div style="float: right;">这是第2个div</div><!--正常向右浮动-->
<div style="clear: both;">这是一个分隔段落</div><!--清除浮动不会重新排列 正常排列 前后不允许出现浮动元素-->
<div style="float: right;">这是第3个div</div><!--浮动出现在清除浮动元素的下一行-->
<div>这是第4个div</div><!--浮动元素之后重新排列-->
<div>这是第5个div</div>
</html>
元素清除左右浮动的效果是自己本身的位置不变，而且自己的位置不会有别的元素浮动过来。
