浮动 float

普通流(标准/文档流):盒子自上而下,从左到右排列,

浮动:让多个盒子(块级元素)在一行内显示  脱离文档流,会影响标准流,对后面的盒子有影响

<style>
		/*普通流 盒子自上而下排列
		.up{
			width: 300px;
			height: 200px;
			background-color:pink;
		}
		.down{
			width: 300px;
			height: 200px;
			background-color:green;
		}*/
		/*浮动*/
		.up{
			width: 300px;
			height: 200px;
			background-color:pink;
			float:left;
		}
		.down{
			width: 320px;
			height: 220px;
			background-color:green;
		}
	</style>
</head>
<body>
	<div class="up"></div>
	<div class="down"></div>
</body>

浮动元素不会跨越父元素的padding,border

一个父盒子里面,一个子盒子有浮动,则其他子盒子也要有浮动

加浮动后,会有行内块元素特性

如果已经给行内元素加浮动,此时不需转换也有宽高

 

 

清除浮动:为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动方法:

1:额外标签法: clear  如果清楚了浮动,父亲去自动检测孩子的高度,以最高为准

clear:both/right/left
 /*清除浮动*/
	    .clear{
	    	clear:both;
	    }
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
		<div class="clear"></div><!-- 最后一个浮动标签后添加一个标签 清除浮动 -->
	</div>
</body>

缺点:添加许多无意义标签,结构化差

2:给父级添加  overflow:hidden;

3: 伪类  

.clearfix:after{
		/*正常浏览器清除浮动*/
		content:"";
		display:block;
		height: 0;
		clear:both;
		visibility:hidden;
	}
.clearfix{*zoom:1;} /*  zoom 1 IE 6专用器清除浮动  *zoom 1  ie7以下版本识别*/

4:双伪类   before和after


	/*双伪类*/
	.clearfix:before, .clearfix:after{
		content: "";
		display: table;
	}
	.clearfix:after{
		clear: both;
	}
	.clearfix{
		*zoom: 1;
	}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值