HTML-CSS（七）元素的浮动布局

最新推荐文章于 2022-10-11 08:38:13 发布

每天进步一大步

最新推荐文章于 2022-10-11 08:38:13 发布

阅读量1.8k

点赞数 4

分类专栏： CSS HTML 文章标签： css

本文链接：https://blog.csdn.net/weixin_44730244/article/details/115815391

版权

HTML 同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

CSS

65 篇文章 3 订阅

订阅专栏

元素的浮动布局在css中是很常见的，可以利用浮动布局实现很多功能，比如文字环绕效果，块元素的横向排列等等，但是也有很多缺陷，比如浮动元素会脱离文档流，造成父元素的高度塌陷。用过浮动布局的人，可能真的是又爱又恨捏。

浮动使用方法

float属性：属性值left（左浮）/right（右浮）
float：left 左浮动
在这里插入图片描述
float:right（右浮动）

注意：不管是左浮动还是右浮动，都是根据父元素的宽度而定的，如果浮动元素是排在父元素内的第一行
那么左浮动就是父元素的左上角，右浮动那个就是跑到父元素的右上角。如果浮动元素前面已经有其他的同级元素，并且该同级元素并未形成脱离文档流的情况，那么元素只会在自己本行进行左右浮动。如果其他元素都是浮动，并且浮动方向都是一样的话，就会形成全部排在一行的效果，排列顺序根据元素的代码位置而定。比如下图的样子
在这里插入图片描述

元素浮动的应用

文字环绕

在这里插入图片描述
当绿色边框使用浮动定位时，就会往上串，与红色边框形成层叠效果。绿色边框可以覆盖红色边框，但是文字内容不会被覆盖，反而红色文字会被挤开在绿色元素周围

意思就是说：浮动元素会脱离网页文档，与其他元素发生重叠。但是，不会与文字（包括图片，表单元素）内容发生重叠（形成文字环绕效果）

父元素高度塌陷

元素浮动必会带来元素层叠效果，也就会形成下面的效果。第一列元素都设置了浮动，导致下面不设置浮动的灰色框的元素就会往上挤压，形成覆盖效果。
在这里插入图片描述
如何解决文档脱流形成的层叠，并且元素还能正常的横向排列（也叫解决脱流带来的父元素高度塌陷问题）

高度塌陷解决（一）

创建一个父元素，包裹已经脱流的元素，并且设置高度，防止脱流造成的高度塌陷
在这里插入图片描述

高度塌陷解决（二）

overflow:auto 对于超出边界的元素，父元素可以做自动的调整，保证脱流元素被涵盖在父元素当中
在这里插入图片描述

高度塌陷解决（三）

clear：left/right/both 当我们不希望元素受到周围浮动元素影响时，就可以给该元素增加clear属性
clear:left 表示当前元素不受左浮动的影响

clear:right 表示当前元素不受右浮动的影响

clear:both 表示当前元素不受左右浮动的影响
在这里插入图片描述

经典例子：聊天框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
			.left{
				float: left;
				width: 300px;
				height: 100px;
				background-color: #808080;
				clear: right;
			}
			.right{
				float: right;
				width: 300px;
				height: 100px;
				background-color: green;
				clear: left;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="left">float:left</li>
			<li class="right">float:right</li>
			<li class="left">float:left</li>
			<li class="right">float:right</li>
			<li class="left">float:left</li>
			<li class="right">float:right</li>
		</ul>
	</body>
</html>

在这里插入图片描述
优化：直接全部使用clear：both就不用给每个元素单独设置清除左浮动或者右浮动了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
			.left{
				float: left;
				width: 300px;
				height: 100px;
				background-color: #808080;
			}
			.right{
				margin-top: 5px;
				float: right;
				width: 300px;
				height: 100px;
				background-color: green;
			}
			.left,.right{
				clear: both;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="left">float:left</li>
			<li class="right">float:right</li>
			<li class="left">float:left</li>
			<li class="right">float:right</li>
			<li class="left">float:left</li>
			<li class="right">float:right</li>
			<li class="right">float:right</li>
		</ul>
	</body>
</html>

在这里插入图片描述

元素浮动注意事项

1.浮动元素在排列时，只参考前一个元素位置即可

在这里插入图片描述

2.右浮动顺序问题

在这里插入图片描述

3.浮动重叠问题

（1）浮动元素不会覆盖文字内容

（2）浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以图片看做是一个特殊文本）
在这里插入图片描述
（3）浮动元素不会覆盖表单元素（输入框、单选框、复选框、按钮下拉选择框等）

每天进步一大步

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS（七）元素的浮动布局

元素的浮动布局在css中是很常见的，可以利用浮动布局实现很多功能，比如文字环绕效果，块元素的横向排列等等，但是也有很多缺陷，比如浮动元素会脱离文档流，造成父元素的高度塌陷。用过浮动布局的人，可能真的是又爱又恨捏。浮动使用方法float属性：属性值left（左浮）/right（右浮）float：left 左浮动float:right（右浮动）注意：不管是左浮动还是右浮动，都是根据父元素的宽度而定的，如果浮动元素是排在父元素内的第一行那么左浮动就是父元素的左上角，右浮动那个就是跑到父元素的右上角
复制链接

扫一扫