html中的浮动问题

再次看到html标签，看到了很多以前没注意的问题，现在说说浮动的问题。

浮动用float，这个不用多说了吧。

float的属性:left, right, 默认是none;

应用场景:1.文字环绕一个元素显示 2.很多个容器横向排列的的时候

什么是文字环绕元素呢?或许有许多小白不懂。这里给上一张图说明一下

这种文字在元素里面的，就是文字环绕元素。

float的特点:1.元素浮动之后，是脱离文档流(飘起来不占位置)，所以下面的元素会顶上去，占据浮动元素原来的位置。

2.多个元素浮动之后会横向排列

有很多人会问，既然应用场景中说float是为了解决多个元素横向排列问题的，那么为什么多个元素使用float后，反而还会横向排列呢？这该怎么解决呢？

这就是我要说的我们一般学习这里，容易忽略的内容: 清除浮动属性 clear

clear：left，right，默认是none；

这里说的清除，不是说清除了浮动，而是打破元素之前的排列方式，如果是横向的排列的就会变成竖向排列的，但是float还是飘着的

clear只会影响自己。

下面附上几行代码，有兴趣的可以自己去试试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			
			.box1{ width: 100px; height: 100px; background: blue; float: right;}
			.box2{ width: 150px; height: 150px; background: pink; float: right;clear: right;}
			.box3{ width: 250px; height: 250px; background: yellow; float: right; clear: right;}
			.box4{ height: 800px; background: green;clear: both; width: 100px;}
		</style>
	</head>
	<body>
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">234</div>		
	</body>
</html>

html中的浮动问题

推荐阅读