清除浮动

最新推荐文章于 2024-07-08 14:25:11 发布

rock4

最新推荐文章于 2024-07-08 14:25:11 发布

阅读量125

点赞数

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

本文链接：https://blog.csdn.net/rock4/article/details/107156964

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1：为什么用清除浮动：很多情况下父级不方便给高度，子盒子浮动后脱离普通流，父级的高变为0，影响下面的布局。
2：方法：

1：直接给父级设置高度

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

<style>
.a{
				
				border: 2px solid red;
				height:100px;
			}
			
			.b{
				float: left;
				background-color: green;
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			.c{
				float: left;
				background-color: red;
				width: 100px;
				height: 100px;
				border: 1px solid yellow;
			}
<style>

2:在标签后加一个空标签，用clear属性

<body>
	<div class="a">
	<div class="b"></div>
	<div class="c"></div>
	<div class="d"></div>
	</div>
</body>

<style>
.a{
				
				border: 2px solid red;
			}
			
			.b{
				float: left;
				background-color: green;
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			.c{
				float: left;
				background-color: red;
				width: 100px;
				height: 100px;
				border: 1px solid yellow;
			}
			.d{
			clear:both;
			}
<style>

3:在父标签上使用，：after属性

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

<style>
.a：after{
				display: block; //转换为块元素
				clear:both;		//清除浮动
				content: "";	//插入生成的内容
				visibility: hidden;		//隐藏
				height: 0;
			}
			.a{
				border:2px  solid red;
				zoom:1;  //为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动。
				}
			.b{
				float: left;
				background-color: green;
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			.c{
				float: left;
				background-color: red;
				width: 100px;
				height: 100px;
				border: 1px solid yellow;
			}
<style>

4：在父级上使用overflow: hidden;不可以position一起使用

<body>
	<div class="a">
	<div class="b"></div>
	<div class="c"></div>
	<div class="d"></div>
	</div>
</body>

<style>
.a{
				overflow:hidden;
				border: 2px solid red;
			}
			
			.b{
				float: left;
				background-color: green;
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			.c{
				float: left;
				background-color: red;
				width: 100px;
				height: 100px;
				border: 1px solid yellow;
			}
<style>

5：使用双伪元素：

clearfix是父类
.clearfix::before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }

rock4

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动

1：为什么用清除浮动：元素浮动后父级的高变为0，清除浮动是为了避免高度为02：方法：1：直接给父级设置高度<body> <div class="a"> <div class="b"></div> <div class="c"></div> </div></body><style>.a{ border: 2px solid red; height:100p
复制链接

扫一扫

专栏目录