详述float样式属性

最新推荐文章于 2021-11-29 21:01:56 发布

泷憬

最新推荐文章于 2021-11-29 21:01:56 发布

阅读量918

点赞数

分类专栏： CSS 文章标签： CSS之float样式属性

本文链接：https://blog.csdn.net/IT_Helianthus/article/details/90374704

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、引例

HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>		
		<div id="zzu" style="border: 1px solid red;">
			<span>郑州</span><span>大学</span>
		</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
结果分析：两个span标签不换行，则两个词语能够严丝合缝的靠拢在一起。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>		
		<div id="zzu" style="border: 1px solid red;">
			<span>郑州</span>
			<span>大学</span>
		</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
结果分析：两个span标签换行，两个词语之间产生了间隙。那么怎么样让换行的两个标签所代表的两个词语严丝合缝的在一行显式呢？很简单——float。
浮动消除间隙方式一：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>		
		<div style="border: 1px solid red;">
			<span style="float: left;">郑州</span>
			<span style="float: left;">大学</span>
			<div style="clear: left;"></div>
		</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
结果分析：通过左浮动使换行的两个标签所代表的两个词语严丝合缝的在一行显式。为什么？因为元素的浮动使得元素自身脱离正常文档流，其实这时的间隙依然存在，只是被词语覆盖罢了。注意：不仅仅是span标签，HTML中相当部分元素都有这样的特点——元素换行书写后，浏览器显示元素之间有间隙，消掉这些间隙可以使用float实现。
浮动消除间隙方式二(推荐)：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				border: 1px solid red;
			}
			#zzu:after{
				clear: left;
				content: "";
				display: block;
			}
		</style>
	</head>
	<body>		
		<div id="zzu" style="border: 1px solid red;">
			<span style="float: left;">郑州</span>
			<span style="float: left;">大学</span>
		</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

二、float样式属性

设置元素浮动方向，该属性有多个值：

值	描述
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
left	元素向左浮动。
right	元素向右浮动。
inherit	规定应该从父元素继承 float 属性的值。注：IE浏览器不支持“inherit”属性值。

1、none示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>none</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
    	<div class="out">
        	<div class="in" style="background-color: red; float:none;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
2、left示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>left</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
		<div class="out">
        	<div class="in" style="background-color: red; float:left;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	说明：红框左移,覆盖绿框。
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：使用float样式属性可以使得块级元素在同一行显示。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>left</title>
		<style type="text/css">
			.out{
				width:300px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
		<div class="out">
        	<div class="in" style="background-color: red; float:left;"></div>
        	<div class="in" style="background-color: green; float:left;"></div>
        	<div class="in" style="background-color: yellow; float:left;"></div>
    	</div>
    	说明：子div全部左浮动,父div宽度为300px；父div的宽度刚好容得下水平排列的子div。
	</body>
</html>

运行结果如下图：
在这里插入图片描述
3、right示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>right</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
		<div class="out">
        	<div class="in" style="background-color: red; float:right;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	说明：红向右浮动。
	</body>
</html>

运行结果如下图：
在这里插入图片描述
注意：
1、以往该属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动；
2、浮动元素会生成一个块级框，而不论它本身是何种元素；
3、如果浮动非替换元素，则要指定一个明确的宽度，否则它们会尽可能地窄。
4、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>没有足够的浮动空间</title>
		<style type="text/css">
			.out{
				width:250px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red; float:left;"></div>
        	<div class="in" style="background-color: green; float:left;"></div>
        	<div class="in" style="background-color: yellow; float:left;"></div>
    	</div>
    	说明：由于父div的宽度不足以容得下三个子div水平排列，那么其它子div浮动块儿将向下移动；
	</body>
</html>

运行结果如下图：
在这里插入图片描述

三、特殊情况示例(卡住了)

示例如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title>没有足够的浮动空间</title>
		<style type="text/css">
			.out{
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
				width: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="height: 120px; background-color: red;"></div>
        	<div class="in" style="height: 100px; background-color: green;"></div>
        	<div class="in" style="height: 100px; background-color: yellow;"></div>
    	</div>
		<br/>
		<div class="out">
        	<div class="in" style="height: 120px; background-color: red; float:left;"></div>
        	<div class="in" style="height: 100px; background-color: green; float:left;"></div>
        	<div class="in" style="height: 100px; background-color: yellow; float:left;"></div>
		</div>
    	说明：由于父div的宽度不足以容得下三个子div水平排列并且第一个子div的高度比其它子div的高度高，那么这些高度比较低的子div就有可能被卡住的；
	</body>
</html>

运行结果如下图：
在这里插入图片描述

泷憬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详述float样式属性

一、引例HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。示例如下：<html> <head> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫

专栏目录