如何清除浮动

Encounter∞

于 2023-02-23 23:43:43 发布

阅读量832

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_44482048/article/details/129192514

版权

文章介绍了清除浮动的四种常见方法：1)额外标签法，通过添加空标签并设置`clear:both`；2)使用`overflow:hidden`对父元素进行处理；3)通过`:after`伪元素为父元素清除浮动；4)结合`:after`和`:before`双伪元素清除浮动。这些方法主要用于解决CSS布局中因浮动元素导致的父元素高度塌陷问题。

摘要由CSDN通过智能技术生成

清除浮动总共有四种方式。

1.额外标签法

该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 html 代码所示：

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
  <div class="clear" style="clear: both;"></div>  <!-- 添加一个空的标签 -->
</div>

2.overflow: hidden

给父元素添加 overflow: hidden。

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	.app{
		overflow: hidden; /* 父元素添加 overflow 属性清除浮动 */
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>

3. :after 伪元素法

:after 伪元素法，为父元素清除浮动。

<div class="app clearfix">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
/* --------以下两行样式代码为固定写法--------  */
.clearfix:after{
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  /* 为 IE6、IE7浏览器设置的清除浮动 */
  *zoom: 1;
}
/* --------以上两行样式代码为固定写法--------- */
.app{
  width: 500px;
  margin: 0 auto;
  border: 1px solid #409EFF;
}
.app1{
  float: left;  /* 子元素向左浮动 */
  width: 200px;
  height: 100px;
  background-color: skyblue;
}
.app2{
  float: left; /* 子元素向左浮动 */
  width: 200px;
  height: 100px;
  background-color: pink;
}
</style>

4.:after和 :before双伪元素

:after和:before双伪元素清除浮动。

<div class="app clearfix">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
	}
	/* --------以下两行样式代码为固定写法--------  */
	.clearfix:after,.clearfix:before{
		content: '';
		display: table;
	}
	.clearfix:after{
		clear: both;
	}
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
	/* --------以上两行样式代码为固定写法--------- */
	.app{
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>