web前端-浮动处理常用方法-前端教程-前军教程网

使用浮动后的特性:

1.会释放当前元素所占位置(布局层已经漂浮)

2.使用浮动后两个元素间会紧密贴合在一起

3.使用浮动后多个元素间顶部对齐

4.使用浮动后元素会脱离标准文档流(之前块级行内的特性都会相违背),形成 "块级框".

"坍塌"(塌陷)现象 :(没有设置固定高度时) 当一个盒子中【所有子元素】都已经使用浮动后 ,那么该元素的高度就会为0

[注意] 网页布局,任何容器都应该有高度(可以是设置,也可以是由内容撑开的高度) ,如果没有高度,布局一定会出问题(重叠在一起)


	.container{
		width:1000px;
		margin:50px auto;
		border:3px solid red;
		
		}
	.box{
		width:200px;
		height:200px;
		}
		
	.box1{
		background-color:red;
		float:left;
		
		}	
	
	.box2{
		background-color:green;
		float:right;
		height:500px;
		}	
		
	.box3{
		background-color:blue;
		float:left;
		height:300px;
		}
	
	.box4{
		height:200px;
		background-color:orange;
		}				
</style>

/**

内容溢出:

visible 可见

hidden 隐藏

scroll 滚动条查看 (内容不溢出也会有滚动条)

auto 自动 (内容溢出则滚动条 ,反之没有)

overflow:auto;

块级框: 只要使用浮动, 绝对定位,固定定位的元素都会形成块级框.

1.盒子不占网页布局位置

2.行内元素也可以设置宽高属性

3.行内元素也可以设置垂直方向的外边距

4.内容宽度如果不指定,则以内容撑开的宽度为准

清除浮动(扩展盒子高度 ,解决浮动导致盒子塌陷问题) :

1.手动设置容器高度 (不适用于高度不确定的场景)

2.使用clear 清除浮动(可以使用在任何场景):

具体实现 : 在使用浮动的容器的【末尾】处追加一个空白的【块元素】 ,设置css 属性cleath:both;

3.(有场景使用限制)给父容器设置 overflow:hidden; 清除浮动

4. H5 候补 (::after)

.container{
		width:1000px;
		margin:50px auto;
		border:3px solid red;
		/*height:500px;*/
				overflow:hidden;
		}
	.box{
		width:200px;
		height:200px;
		}
	.box1{
		background-color:red;
		float:left;
		}	
	.box2{
		background-color:green;
		float:right;
		height:500px;
		}	
	.box3{
		background-color:blue;
		float:left;
		height:300px;
		}
	.box4{
		height:200px;
		background-color:orange;
		}
	.clearfix{
		clear:both; /*清除两侧浮动*/
		}					
</style>
</head>
<body>
	<div class="container">
    	<div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
       <!-- <div class="clearfix"></div>-->
    </div>
      <div class="box4"></div>
</body>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

web前端-浮动处理常用方法