css中的浮动float-优快云博客

本文链接：https://blog.youkuaiyun.com/xiahang1121/article/details/89873352

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			.div1{
				height: 80px;
				width: 180px;
				background-color: red;
				
			}
			.div2{
				height: 50px;
				width: 220px;
				background-color: green;
			
				float: right;
			}
			.div3{
				height: 100px;
				width: 120px;
				background-color: blue;
				
			}
			.div4{
				height: 20px;
				width: 220px;
				background-color: wheat;
				float: right;
			}
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2019-05-06
        	描述：浮动是元素脱离正常文档流,让其在文档流中占据不是自己的位子和空间 
        	float :在父级元素中如何浮动 只有left , right none
        	clear: 设置元素在哪一侧或者两侧都不允许出现浮动,值有 left ,right,both,none
        -->
        <!--
        	作者：offline
        	时间：2019-05-06
        	描述：浮动之后元素不再独自占据一行,是漂浮在元素上的意思,假如div2浮动了,那么
        		他的下没有浮动一个元素会顶上来,形成新的文档流
        		2,如果他的前一个元素也设置浮动,那么他将浮动到前一个元素的的同一行的后面(前一个元素右边)
        		  如果剩余行无法容纳则换到下一行
        		3,如果前一个元素没有设置浮动,将在前一个元素下方显示  
        -->
        <div class="div1">
        	我是div1
        </div>
        <div class="div2">
        	我是div2
        </div>
        <div class="div3">
        	我是div3
        </div>
        <div class="div4">
        	我是div4
        </div>
	</body>
</html>

清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动</title>
		<style type="text/css">
			.div1{
				height: 80px;
				width: 180px;
				background-color: red;
				float: right;
			}
			.div2{
				height: 50px;
				width: 220px;
				background-color: green;
			
				float: right;
				clear: right;/*如果不清除浮动这个DIV3将顶到最上面去*/
			}
			.div3{
				height: 50px;
				width: 220px;
				background-color: blue;
			
				float: right;/*如果左边顶满了,那就自动换行到下面*/
				
			}
			
		</style>
	</head>
	<body>
		<!--
        	
        -->
        <!--
        	
        -->
        <div class="div1">
        	我是div1
        </div>
        <div class="div2">
        	我是div2
        </div>
        <div class="div3">
        	我是div3
        </div>
        
	</body>
</html>