清除浮动

最新推荐文章于 2024-04-29 16:58:49 发布

hehe13525

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量242

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/hehe13525/article/details/52735462

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

相关信息：

在子元素变成浮动元素后，父元素就不计算子元素的高度，于是高度变成0，像这样

清除浮动后

过程：

两种，clearfix或BFC

1，clearfix

给父元素加clearfix

.clearfix:after {

content:".";

display:block;

height:0;

visibility:hidden;

clear:both;

}

2，BFC

父元素变成BFC，这样就会计算浮动元素的高度

overflow:hidden

代码

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.clearfix:after {
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.container{
			width: 300px;
			border: 1px solid #000;
			/*也可以在这里加overflowhidden，而不是用clearfix方法*/
		}
		.box{
			float: left;
			margin: 10px;
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="container clearfix">
		<div class="box"></div>
		<div class="box"></div>
	</div>
</body>
</html>