CSS样式之去除浮动

最新推荐文章于 2023-07-27 21:11:42 发布

AnyBisks

最新推荐文章于 2023-07-27 21:11:42 发布

阅读量365

点赞数

分类专栏：前端css 文章标签： css

本文链接：https://blog.csdn.net/AnyBisks/article/details/78812524

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS样式之去除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 600px;
				height: 600px;
				margin: 20px auto;
			}
			.title{
				height: 100px;
				background: palegoldenrod;
			}
			.centet{
				margin: 10px 0px;
				/* 浮动处理方法 父元素加属性overflow: hidden;
				 * 如果有内容出去了盒子  不能使用这个方法，会裁剪掉
				 */
				/*overflow: hidden;*/
			}
			.centet .left{
				height: 380px;
				width: 400px;
				background: palevioletred;
				float: left;
			}
			.centet .right{
				height: 380px;
				width: 190px;
				background: pink;
				float: right;
			}
			.footer{
				height: 100px;	
				background: paleturquoise;
			}
			
			
			.clearFix:after{
				content: "";
				display: block;
				height: 0px;
				line-height: 0px;
				visibility: hidden;
				clear: both;
			}
			/*兼容ie*/
			.clearFix{
				zoom: 1;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="title">
				
			</div>
			<div class="centet clearFix">
				<div class="left"></div>
				<div class="right"></div>
				<!--额外标签法:去除浮动-->
				<!--<div style="clear: both;"></div>-->
			</div>
			
			<div class="footer"></div>
		</div>
		
		
	</body>
</html>

AnyBisks

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式之去除浮动

CSS样式之去除浮动 body{ margin: 0px; padding: 0px; } .box{ width: 600px; height: 600px; margin: 20px auto; } .title{ height: 100px; background: pa
复制链接

扫一扫

专栏目录