清除浮动（float）的几种方法

最新推荐文章于 2024-07-25 15:07:09 发布

勿上

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量821

点赞数

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

本文链接：https://blog.csdn.net/w13715075923/article/details/72851159

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浮动的定义：

当元素设置了浮动属性，元素的宽度会随着内容的变化而变化，其次，会对紧邻在其后的元素造成影响，使元素脱离了文档流，按指定方向上移动，遇到父级边界或者相邻的浮动元素就停下来。

1、加宽父级元素

给父级元素设定一个大于子元素的width值，使之可以完全包裹子层。

2、给父级加浮动（margin左右失效）

	.fatherbox{
		border: 5px solid red;
		float: left;
	}
	.son1{
		width: 300px;
		height:300px;
		background-color: blue;
		float: left;
	}

3、用inline-block（margin左右auto失效）

	.fatherbox{
		border: 5px solid red;
		display: inline-block;
	}
	.son1{
		width: 300px;
		height:300px;
		background-color: blue;
		float: left;
	}

4、空标签（定义一个空内容的标签，在其里面设置clear:both）

	.fatherbox{
		border: 5px solid red;
		float: left;
	}
	.son1{
		width: 300px;
		height:300px;
		background-color: blue;
		float: left;
	}
	/*这是空标签*/
	.div1{
		clear: both;
	}

5、br清浮动（br里有个属性clear:all）（但不符合结构、样式、行为三者分离）

<div class="fatherbox">
<div class="son1">我是子层</div>
<!-- 这个br要放在后面，放在前面就会造成换行效果 -->
<br clear="all"/>
</div>

6、after伪类（主流方法）

<head>
	<title>清除浮动的测试</title>
<style type="text/css">
	.fatherbox{
		border: 5px solid red;
	}
	.clearfix:after{
		content: "";
		display: block;
		clear: both;
	}
	.son1{
		width: 300px;
		height:300px;
		background-color: blue;
		float: left;
	}
</style>
</head>
<body>
<div class="fatherbox clearfix">
<div class="son1">我是子层</div>
</div>
</body>

6、overflow:hidden;

勿上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
清除浮动（float）的几种方法

浮动的定义：当元素设置了浮动属性，元素的宽度会随着内容的变化而变化，其次，会对紧邻在其后的元素造成影响，使元素脱离了文档流，按指定方向上移动，遇到父级边界或者相邻的浮动元素就停下来。1、加宽父级元素给父级元素设定一个大于子元素的width值，使之可以完全包裹子层。2、给父级加浮动（margin左右失效） .fatherbox{ border: 5px solid
复制链接

扫一扫

专栏目录