浮动、浮动元素的大小、浮动元素的位置、环绕与清除浮动

最新推荐文章于 2023-02-24 19:12:57 发布

byte~

最新推荐文章于 2023-02-24 19:12:57 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/qq_45929209/article/details/121645065

版权

浮动布局元素大小位置环绕清除浮动网页布局

关键词由CSDN通过智能技术生成

浮动float

浮动
浮动元素的大小
浮动元素的位置
环绕与清除浮动

浮动

当块状元素需要横向排列时，我们这个时候需要用到浮动我们先针对一个浮动元素对他自己或者同级元素产生的影响来分析：

设置为float会脱离文档流，不会再在文档流中出现。

实现312排布的浮动布局：
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div {
				margin: 0;
				padding: 0;
				font-size: 32px;
				font-weight: bold;
			}
			
			div {
				color: white;
				text-align: center;
				line-height: 100px;
				/*float:left;*/
				width: 150px;
				height: 300px;
			}
			
			#box1 {
				float: left;
				margin-left: 150px;
				display: inline;/*用来兼容IE6，不出现*/
				background-color: red;
			}
			
			#box2{
				float: right;
				background-color: blue;
			}
			
			#box3{
				float: left;
				margin-left: -300px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="box1">box1</div>
		<div id="box2">box2</div>
		<div id="box3">box3</div>
	</body>
</html>

浮动元素的大小

一个元素被设定为浮动，会引起元素自身体积的塌缩

产生塌缩的三种情况：

该元素在最开始的时候，被设定了宽度和高度，一般就不会出现体积的塌缩
该元素最开始没有设定宽度和高度，但是里边有文字或者图片等其他包含的内容（这些内容是没有经过任何处理的），则该元素会缩，缩到将该里边内容刚刚好体现出来为止
该元素最开始没有设定高度和宽度，并且里边也没有任何的东西，则该元素会出现不断地缩小缩小，直到最后变成一个点（设置了border），或者没有（什么都没有设定）的一个状态

针对上面所述，演示代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div {
				margin: 0;
				padding: 0;
			}
			
			div {
				float: left;
				margin: 6px;
				border: 1px solid #000000;
			}
			
			#box1 {
				width: 100px;
				height: 100px;
			}
			
			#box2 {
				line-height: 30px;
				font-size: 30px;
			}
			
			#box3 {
				line-height: 100px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box1">box1</div>
		<div id="box2">box2</div>
		<div id="box3">box3</div>
		<div id="box4"><img src="001/img/bohe-004.jpg"/></div>
		<div id="box5"></div>
		<div id="box6"></div>
	</body>
</html>

浮动元素的位置

当一个元素被设定浮动之后，会浮动到你父元素的边界，或者另一个浮动元素的边界。浮动元素是脱离了文档流的结构。

针对上面所述，演示代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p {
				width: 90%;
				border: solid 2px red;			
			}	
			
			#s1 {
				float: right;
				background-color: #FF33FF;
			}
			
			#s2 {
				float: left;
				background-color: #FF33FF;
			}
			
			#s3 {
				float: right;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<p class="p1"><span id="s3">你当事人各方</span>发<span id="s1">似懂非懂方式</span>及附件四分局时代华府灰度服哈护肤未恢复发货后发生的恢复为是等会发货未付你说的话范围划分的是否挂未付合计卡尔<span id="s2">回复我我很费劲回</span>复ID合肥检察伍尔夫地级市府文化方式答复哈法hi服务费威风 地方花文化复旦复华访问符合胃复安未婚夫威风案发后无爱而恢复为发挥额分</p>
	</body>
</html>

上面p元素里面的内容是我随便输入的，然后我建议就是你在体验该浮动元素（s1）对父元素（p）、或者另外一个浮动元素（s3）时，先去掉float的作用，这样体会会更深刻。

环绕与清除浮动

环绕

当浮动的元素不再像上面所说的那样，即浮动的元素为文字，而是图片时，会产生环绕的现象。
针对上面所述，演示代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p {
				width: 20%;
				border: solid 2px red;
				height: 100%;		
			}	
			
			#s1 {
				float: right;
				background-color: #FF33FF;
			}
			
			#s2 {
				float: left;
				/*background-color: #FF33FF;*/
			}
			
			#s3 {
				float: right;
				background-color: #FF0000;
			}
			
			img {
				display: block;
				margin: 10px;
				width: 80px;
				height:60px;
			}
		</style>
	</head>
	<body>
		<p class="p1"><span id="s3">你当事人各方</span>发<span id="s1">似懂非懂方式</span>及附件四分局时代华府灰度服哈护肤未恢复发货后发生的恢复为是等会发货未付你说的话范围划分的是否挂未付合计卡尔<span id="s2"><img src="001/img/bohe-004.jpg"/></span>复ID合肥检察伍尔夫地级市府文化方式答复哈法hi服务费威风 地方花文化复旦复华访问符合胃复安未婚夫威风案发后无爱而恢复为发挥额分仍沃尔夫而非忽视的南方华士大夫 返话费挥发物复活安抚阿发怒合法 返回护肤返回US大黄蜂就</p>
	</body>
</html>

清除浮动
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div {
				padding: 0;
				margin: 0;
			}
			
			#header,#left,#middle,#right,#footer {
				border: 1px solid #FF0000;
				height: 50px;
			}
			
			#header {
				width: 100%;
			} 
			
			#left,#middle,#right {
				float: left;
				width: 33.33%;
			}
			
			#left {
				height: 100px;
			}
			
			.clear {
				clear: both;/*方法二，增加一个空div元素，使用clear*/
			}
			
			#footer {
				/*clear: left;清除浮动的关键代码,方法一*/
				border-color: #000;
			}
			
		</style>
	</head>
	<body>
		<div id="header">Header</div>
		<div id="left">Left</div>
		<div id="middle">Middle</div>
		<div id="right">Right</div>
		<div class="clear"></div>
		<div id="footer">Footer</div>
	</body>
</html>