【CSS】float 浮动和 clear 清除浮动

最新推荐文章于 2022-08-15 11:25:08 发布

一颗不甘坠落的流星

最新推荐文章于 2022-08-15 11:25:08 发布

阅读量1k

点赞数

分类专栏： CSS 笔记文章标签： css float clear 浮动清除浮动

本文链接：https://blog.csdn.net/qq_45677671/article/details/122237704

版权

CSS 笔记专栏收录该内容

22 篇文章 2 订阅

订阅专栏

文章目录

1. float （浮动）

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
浮动元素会从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

float 语法：

/* 默认为 none 属性值 */
{
	float : left / right / none / inherit;
}

参数说明：

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

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		section {
		  border: 1px solid blue;
		}
		
		div {
		  margin: 5px;
		  width: 50px;
		  height: 50px;
		}
		
		.left {
		  float: left;
		  background: pink;
		}
		
		.right {
		  float: right;
		  background: cyan;
		}
		}
	</style>
	<body>
		<section>
		  <div class="left">1</div>
		  <div class="left">2</div>
		  <div class="right">3</div>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
		     lectus vulputate. Donec id iaculis velit. Aliquam vel
		     malesuada erat. Praesent non magna ac massa aliquet tincidunt
		     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
		</section>
	</body>
</html>

在这里插入图片描述

2. clear（清除浮动）

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear语法：

/* 默认为 none 属性值 */
{
	clear: left / right / none / inherit;
}

参数说明：

- left：	左侧不允许浮动元素
- right：	右侧不允许浮动元素
- both：	左侧或右侧均不允许浮动元素
- none：	允许两侧都有浮动元素。默认值
- inherit：	元素继承其父级的 clear 值

2.1 非浮动元素使用

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。
这个非浮动块的垂直外边距会折叠。

初始代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		section {
		  border: 1px solid blue;
		}
		
		div {
		  margin: 5px;
		  width: 50px;
		  height: 50px;
		}
		
		.left {
		  float: left;
		  background: pink;
		}
		
		.middle {
		  clear: none;
		  background: teal;
		} 
		
		.right {
		  float: right;
		  height: 100px;
		  background: cyan;
		}
		}
	</style>
	<body>
		<section>
		  <div class="left">1</div>
		  <div class="right">3</div>
		  <p class="middle">
		  	 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
		     lectus vulputate. Donec id iaculis velit. Aliquam vel
		     malesuada erat. Praesent non magna ac massa aliquet tincidunt
		     vel in massa. Phasellus feugiat est vel leo finibus congue.
		  </p>
		</section>
	</body>
</html>

在这里插入图片描述

示例：左边不允许有浮动元素

.middle {
  clear: left;
  background: teal;
}

在这里插入图片描述

示例：右边不允许有浮动元素

.middle {
  clear: right;
  background: teal;
}

在这里插入图片描述

2.2 在浮动元素使用

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。
这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

初始代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		section {
		  border: 1px solid blue;
		  /* 避免高度塌陷 */
		  overflow:hidden;
		}
		
		div {
		  margin: 5px;
		  width: 50px;
		  height: 50px;
		}
		
		.left {
		  float: left;
		  background: pink;
		}
		
		.middle {
		  /* float: left; */
		  clear: both;
		  background: teal;
		} 
		
		.right {
		  float: right;
		  height: 100px;
		  background: cyan;
		}
		}
	</style>
	<body>
		<section>
		  <div class="left">1</div>
		  <div class="middle">2</div>
		  <div class="right">3</div>
		</section>
	</body>
</html>

在这里插入图片描述

示例：元素左浮动，清除左右两侧浮动

.middle {
  float: left;
  clear: both;
  background: teal;
}

在这里插入图片描述

示例：元素右浮动，清除左右两侧浮动

.middle {
  float: right;
  clear: both;
  background: teal;
}

在这里插入图片描述

2.3 万能清除浮动法

用于解决高度塌陷问题

/* 父元素 */
.clearfix{
    *zoom: 1;
}
.clearfix::afrer{
    content: "";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

一颗不甘坠落的流星

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】float 浮动和 clear 清除浮动

文章目录1. float （浮动）2. clear（清除浮动）2.1 非浮动元素使用2.2 在浮动元素使用2.3 万能清除浮动法1. float （浮动）float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。浮动元素会从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。float 语法：/* 默认为 none 属性值 */{ float : left / right / none / inherit;}参数说明：-
复制链接

扫一扫