CSS浮动问题

最新推荐文章于 2022-08-20 20:50:30 发布

原创最新推荐文章于 2022-08-20 20:50:30 发布 · 379 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

web前端知识专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了CSS中的浮动概念，如何利用浮动实现元素排列，并阐述了浮动带来的父元素高度塌陷问题。文章列举了四种解决方法：固定高度、overflow属性、额外标签和伪元素清除浮动，并分析了各自的优缺点。通过实例代码展示了每种方法的实现，帮助读者理解和应对浮动布局中的常见挑战。

CSS元素浮动问题

概述：

网页中有很多布局效果。标准流是无法完成的，可以利用浮动改变元素默认排列方式

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】（float：left和float：right），直到遇到父元素的边界或另一个浮动元素才会停止。

浮动属性

float
– left 左浮动【从左向右浮动】
– right 右浮动【从右向左排列】
– none 不浮动 (默认值)

浮动的基本特性

可以使块儿元素在一行排列
脱离文档流【不在占用文档的空间】
提升层级【浮动元素会覆盖普通元素】（通俗来讲就是浮动在未设置浮动的元素的上方）

文档流（普通文档流）

块元素从上向下排列
行内元素从左到右

浮动的问题（为什么要清除浮动）

子元素浮动导致父元素高度塌陷（子元素未设置浮动时，父元素会被子元素撑起，而如果子元素设置浮动后，会导致子元素层级变高，脱离了文档流，父元素看起开就相当于是丢失了）。
影响了之后的元素布局（影响了没有浮动属性的元素）

那如何清除浮动对其他元素的影响呢？

父元素固定高度方法
– 描述 : 给父元素添加固定高度
– 缺点：不够灵活

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动问题</title>
		<style type="text/css">
			.container
			{
				width: 400px;
				border: 1px solid #000;
			}
			.con1{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			.con2
			{
				width: 100px;
				height: 100px;
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				
			</div>
			<div class="con2">
				
			</div>
		</div>
	</body>
</html>

在不加浮动的时候，我们知道父容器的高度是被内容撑起来的。

在这里插入图片描述

当我们给两个子元素添加一个浮动浮动属性float:left，再看一下效果。

观看图片，其实也能看到父元素高度已经没有了，这就是浮动造成父元素高度塌陷问题，我们按照方法一给父元素添加一个高度，加上一个height：400px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动问题</title>
		<style type="text/css">
			.container
			{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
			}
			.con1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}
			.con2
			{
				width: 100px;
				height: 100px;
				background-color: blueviolet;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				
			</div>
			<div class="con2">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

这种形式确实能解决父元素高度塌陷问题，但是这样的设置并不灵活（所以不推荐这样使用）

父元素overflow写法
– 描述：给父元素加overflow属性overflow为visible以外的值可以实现
– 缺点：可能会隐藏内容或者触发不需要的滚动条。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动问题</title>
		<style type="text/css">
			.container
			{
				width: 400px;
				border: 1px solid #000;
				overflow: hidden;
			}
			.con1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}
			.con2
			{
				width: 100px;
				height: 100px;
				background-color: blueviolet;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				
			</div>
			<div class="con2">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

给父元素添加overflow确实可以解决父元素塌陷问题，但也有缺点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动问题</title>
		<style type="text/css">
			.container
			{
				width: 400px;
				border: 1px solid #000;
				overflow: hidden;
			}
			.con1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}
			.con2
			{
				height: 100px;
				width: 100px;
				background-color: blueviolet;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
				我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
				我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
				我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
			</div>
			<div class="con2">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

因为overflow还有其他属性所以也会出现一些可以滑动的滚动条。

额外标签方法
– 描述：在浮动元素的【最后】，父元素内部，加上一个空的【不浮动块儿级元素】，并且添加演示clear:both;
– clear 属性说明
– 缺点：代码冗余，影响代码可读性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动问题</title>
		<style type="text/css">
			.container
			{
				width: 400px;
				border: 1px solid #000;
				overflow: hidden;
			}
			.con1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}
			.con2
			{
				height: 100px;
				width: 100px;
				background-color: blueviolet;
				float: left;
			}
			.nullDiv
			{
			    clear: both;	
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				
			</div>
			<div class="con2">
				
			</div>
			<div class="nullDiv">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

伪元素：after清除浮动（相当于在父元素内部加了一个块儿级元素）

写法：
.clearFloat:after
{
content:" " ;
display:block；
clear:both;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动问题</title>
		<style type="text/css">
			.container
			{
				width: 400px;
				border: 1px solid #000;
				overflow: hidden;
			}
			.container::after
			{
				content: "";
				display: block;
				clear: both;
			}
			.con1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}
			.con2
			{
				height: 100px;
				width: 100px;
				background-color: blueviolet;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="con1">
				
			</div>
			<div class="con2">
				
			</div>
		</div>
	</body>
</html>