清除浮动的几种方法

最新推荐文章于 2020-02-03 13:52:46 发布

何淑女

最新推荐文章于 2020-02-03 13:52:46 发布

阅读量175

点赞数

分类专栏： CSS 前端面试题文章标签： css

本文链接：https://blog.csdn.net/weixin_45794767/article/details/103652074

版权

前端面试题同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

清除浮动的几种方法

1.为float元素后的添加clear属性
未添加时的代码

	<style type="text/css">
			.a,.b{
				height: 100px;
				width: 100px;
				border: 5px solid red;
			}
			.a{
				float: left;
			}
			.b{
				float: right;
			}
			.c{
				height: 50px;
				background-color: #00A4FF;
			}
		</style>
		
	<body>
		<div class="a">a</div>
		<div class="b">b</div>
		<div class="c">c</div>
	</body>

未添加时效果展示

添加后的代码

<style type="text/css">
			.a,.b{
				height: 100px;
				width: 100px;
				border: 5px solid red;
			}
			.a{
				float: left;
			}
			.b{
				float: right;
			}
			.c{
				height: 50px;
				background-color: #00A4FF;
				clear: both;
			}
			/* 为float元素后的元素添加clear属性 */
	</style>
	
 <body>
		<div class="a">a</div>
		<div class="b">b</div>
		<div class="c">c</div>
 </body>

添加后的效果展示
在这里插入图片描述
2.利用after伪元素清除浮动（推荐使用）
写一个.clearfix工具样式，当需要清除浮动时，就为其加上这个类

<style type="text/css">
		.parent{
			border: 5px solid springgreen;
		}
		.a,.b{
			height: 100px;
			width: 100px;
			border: 3px solid hotpink;
		}
		.a{
			float: left;
		}
		.b{
			float: right;
		}
</style>

<body>
	<div class="parent">parent
		<div class="a">a</div>
		<div class="b">b</div>
	</div>
</body>

未添加时效果展示
在这里插入图片描述
添加后的代码

<style type="text/css">
		.parent{
			border: 5px solid springgreen;
		}
		.a,.b{
			height: 100px;
			width: 100px;
			border: 3px solid hotpink;
		}
		.a{
			float: left;
		}
		.b{
			float: right;
		}
		.clearfix::after{
			content: '';
			display: block;
			clear: both;
		}
</style>

<body>
	<div class="parent clearfix">parent
		<div class="a">a</div>
		<div class="b">b</div>
	</div>
</body>

添加后的效果展示
在这里插入图片描述
3.利用before和after双伪元素清除浮动(推荐使用)
但用zoom：1触发 IE下 haslayout，使元素根据自身内容计算宽高

<style type="text/css">
	.clearfix:after,.clearfix:before{
			content:'';
			display: table;
		}
		.clearfix:after{
			clear:both;
		}
		.clearfix{
			*zoom:1;
		}
		.parent{
			border: 5px solid springgreen;
		}
		.a,.b{
			height: 100px;
			width: 100px;
			border: 3px solid hotpink;
		}
		.a{
			float: left;
		}
		.b{
			float: right;
		}
<style>
<body>
	<div class="parent clearfix">parent
		<div class="a">a</div>
		<div class="b">b</div>
	</div>
</body>

4.修改父元素的overflow属性（不推荐使用）

将父元素的overflow属性修改为overflow：auto|hidden，通过触发BFC方式，实现清除浮动，内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

.parent{
			height: 100px;
			background-color: palevioletred;
		    overflow: hidden;/* 超出部分隐藏 */
		}

添加后的效果展示（超出部分隐藏）
在这里插入图片描述

何淑女

关注

0
点赞
踩
1

收藏

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

清除浮动的几种方法
复制链接

扫一扫

专栏目录