当前位置：首页 > news >正文

CSS|08 浮动清除浮动

news 来源：原创 2025/6/21 21:55:19

浮动

需求:
能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度!
让多个元素排在同一行:行内元素的特性
给这些元素设置宽高:块级元素的特性

在标准文档流中的元素只有两种:块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
浮动可以让元素脱离标准文档流就可以实现让多个元素排在同一行并且可以设置宽高!
浮动它是通过一个浮动属性来实现
float:这个属性有两个值left(向左浮动)向左移动、right(向右浮动)

向右移动浮动元素的特性:
浮动元素它脱离标准文档流，它不再占用空间了
我们可以把浮动元素理解为“漂”
浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
浮动元素它遇到了父元素的边框然后就停止了浮动
浮动元素它还会遇到上一个浮动元素后就停止了浮动
浮动元素浮动以后其父元素不会再包裹着浮动元素
我们将行内元素进行浮动以后，那么这个行内元素它会变成块级元素

块元素进行浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style type="text/css">.box{width: 600px;border: 1px solid #000;margin-left: auto;margin-right: auto;}.div1{width: 100px;height: 100px;/* #f00 红色*/background-color: #f00;}.div2{width: 110px;height: 100px;/*#0f0 绿色*/background-color: #0f0;}.div3{width: 120px;height: 100px;/*#00f 蓝色 */background-color: #00f;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body>
</html>

div标签是block块级元素，占满一整行。所以不加浮动，是像下面一样的。
在这里插入图片描述
给第一个div1红色块，添加左浮动。此时红色不占用行内，漂起来，原本排队的绿色和蓝色，占用了红色原本位置，排队往前排了一下。
给div1和div2也添加左浮动，红色和绿色就都不用排队了，他们都在行内了。蓝色往前排队了。
在这里插入图片描述
将3个div都设置左浮动，就没有元素在box中，所以没黑框了。3个div都漂出来了，横着排队了。

行内元素进行浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内元素进行浮动</title><style type="text/css">.box{width: 600px;border: 1px solid #000;margin-left: auto;margin-right: auto;}.s1{width: 100px;height: 100px;background-color: #f00;}.s2{width: 100px;height: 100px;background-color: #0f0;}.s3{width: 100px;height: 100px;background-color: #00f;}</style>
</head>
<body><div class="box"><span class="s1">文本一</span><span class="s2">文本二</span><span class="s3">文本三</span></div>
</body>
</html>

未加浮动时，行内元素背景色，只显示行内那么大。
在这里插入图片描述
s1添加左浮动，s1从行内元素变块级元素，形状显示正常，s2和s3贴着s1。

s1添加左浮动，将s2添加右浮动，s3更贴着s1,s2漂到最右边了。

s1添加左浮动，将s2，s3添加右浮动。box中没有元素了，都漂出来了。
在这里插入图片描述

小知识点

通用选择器来去除HTML中所有标签的默认内填充和外边距，它就不会影响到我们的排版布局了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动案例</title><style type="text/css">/*通用选择器来去除HTML中所有标签的默认内填充和外边距它就不会影响到我们的排版布局了*/*{margin: 0px;padding: 0px;}.box{width: 100%;height: 40px;background-color: #f00;}ul{border: 1px solid #f00;}ul li{border: 1px solid #ccc;}</style>
</head>
<body><div class="box"></div><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></body>
</html>

不添加通用选择器样式前，会有margin
在这里插入图片描述
添加后，就没有间隙了。margin为0。

浮动案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动案例</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-image: url(../img/bg.png);/*background-repeat: repeat-x;*/}.nav{width: 960px;height: 40px;margin-right: auto;margin-left: auto;}.nav ul{/*将列表前面的项目符号去掉*/list-style: none;}.nav ul li{/*把每一个li标签进行向左浮动li标签它本来是块状元素，浮动后，让每一个li排列成一行*/float: left;/*给每一个li标签设置一个宽度*/width: 120px;/*将文本进行居中*/text-align: center;background-color: #FFA500;height: 30px;line-height: 30px;}a{text-decoration: none;color: white;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div>
</body>
</html>

背景图就一个小五角星，加了浮动后
在这里插入图片描述
不加前

清除浮动

只要有浮动，那么必须有清除浮动。

为什么要清楚浮动？

因为经过浮动的元素，它会影响到它下面的元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹着。
只有清除了浮动，不会影响到浮动元素的下面进行排版布局，浮动元素的父元素会将浮动元素从视觉上包裹着。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>为什么要清楚浮动</title><style type="text/css">.box{width: 600px;border: 1px solid #000;margin-right: auto;margin-left: auto;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;float: left;}.div2{background-color: #0f0;float: left;}.div3{background-color: #00f;float: right;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div><h2>浮动与清除浮动</h2></body>
</html>

就是这里的h2标题因为上面的div浮动，所以h2标题往上跑了，这时候需要清除浮动，标题才会显示到div下面。
在这里插入图片描述

清除浮动的三种方法：

1.给浮动元素的父元素设置一个固定的高度。

不建议使用，因为一个元素的高度一般情况下不是手动设置的，它应该是由其自身的内容来撑高的！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置固定高度清除浮动</title><style type="text/css">.box{width: 600px;border: 1px solid #000;margin-right: auto;margin-left: auto;/*清除浮动：给浮动元素的父元素设置一个固定的高度*/height: 400px;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;float: left;}.div2{background-color: #0f0;float: left;}.div3{background-color: #00f;float: right;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div><h2>浮动与清除浮动</h2></body>
</html>

在这里插入图片描述

2.使用清楚浮动的样式属性clear。

clear这个属性是专用于清除浮动的，它有3个值：
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 两者都清楚
这个属性一般是用在最后，一个浮动元素的下面，在最后一个浮动元素的下面新建一个空白的div，不要给这个div里面放置内容，它只做一件事就是清楚浮动。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用clear属性清除浮动</title><style type="text/css">.box{width: 600px;border: 1px solid #000;margin-right: auto;margin-left: auto;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;float: left;}.div2{background-color: #0f0;float: left;}.div3{background-color: #00f;float: right;}.clear{/*清除浮动，两者都清除*/clear: both;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div><!-- 这个空白的div用来清除浮动 --><div class="clear"></div></div><h2>浮动与清除浮动</h2></body>
</html>

这个有边框，是因为最后一个空的div占用内容了。
在这里插入图片描述
想试试给h2标签加clear样式

是这样的。

3.使用overflow：hidden这个属性来清除浮动

overflow：hidden 它原意是用来将溢出的部分进行隐藏，但是它还可以用于清除浮动。
overflow：hidden 一般主要用来将列表的浮动给清除。

案例一：隐藏溢出


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>overflow的原意</title><style type="text/css">.box{width: 300px;height: 300px;border: 1px solid #f00;/*将溢出的部分隐藏*/overflow: hidden;}</style>
</head>
<body><div class="box">吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。吃粽子、做香包、赛龙舟……不知不觉又是一年端午节，在这个中国传统节日来临之际石景山区古城街道各社区、楼宇开展形式多样的活动，共邀市民过端午。
为弘扬中华民族传统文化，增强社区温馨感和凝聚力，拉近社区邻里间距离，营造幸福和谐社区，近日，老古城东、特钢、十万平、水泥厂社区新时代文明实践站组织社区居民们开展“迎端午，包粽子”活动。</div>
</body>
</html>

在这里插入图片描述

案例二：给列表清除浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用overflow：hidden清除浮动</title><style type="text/css">ul{list-style: none;}ul li{float: left;border: 1px solid #f00;}</style>
</head>
<body><!-- 给li标签的父元素设置一个overflow:hidden --><ul style="overflow: hidden;"><li>栏目管理1</li><li>栏目管理2</li><li>栏目管理3</li><li>栏目管理4</li><li>栏目管理5</li><li>栏目管理6</li><li>栏目管理7</li><li>栏目管理8</li><li>栏目管理9</li><li>栏目管理10</li></ul><h2>清除浮动，清除浮动</h2>
</body>
</html>

在这里插入图片描述

浮动

块元素进行浮动

行内元素进行浮动

小知识点

浮动案例

清除浮动

为什么要清楚浮动？

清除浮动的三种方法：

1.给浮动元素的父元素设置一个固定的高度。

2.使用清楚浮动的样式属性clear。

3.使用overflow：hidden这个属性来清除浮动

案例一：隐藏溢出

案例二：给列表清除浮动

相关文章：