CSS 清除浮动

最新推荐文章于 2024-07-17 10:09:06 发布

AuroraCD

最新推荐文章于 2024-07-17 10:09:06 发布

阅读量159

点赞数

分类专栏： CSS 文章标签：浮动 css 消除浮动

本文链接：https://blog.csdn.net/AuroraCD/article/details/90575574

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浮动

为了让多个块级元素显示在一行。
块级元素一行只显示一个，行内元素一行显示多个，这种正常的显示方式称为“标准流”。
所以浮动是脱标的。

但浮动也有几条性质

浮动在父级元素里面不会超过内边距和边框的范围（父级元素设置了高度）
如果子盒子有一个浮动了，其余的子盒子都应浮动，否则由于浮动的盒子不占位置会影响其他盒子位置
有默认的隐式转换块级元素转换为行内块元素

消除浮动

为了解决父级元素（由于内容高度不确定，未设置高度）由于子集浮动引起的内部高度为0的问题。

案例：想要构建如下布局
随便写的颜色不要嫌丑：）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		border: 1px solid blue;
		width: 300px;
	}
	.big {
		width: 100px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.small {
		width: 100px;
		height: 150px;
		background-color: purple;
		float: right;
	}
	.footer {
		width: 300px;
		height: 30px;
		background-color: #ccc;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

在这里插入图片描述
但给红色和紫色盒子加入float后，由于未给蓝色框盒子设置高度，高度为零。

解决方法：

额外标签法
父级添加overflow属性
使用after伪元素
使用before和after双伪元素

额外标签法

在最后一个浮动标签后添加属性为clear: both | left | right;的标签（一般写both）。

.clear {
		clear: both;
	}

<div class="big"></div>
<div class="small"></div>
<div class="clear"></div>

父级添加overflow属性

出发BFC方式

.father {
		border: 1px solid blue;
		width: 300px;
		overflow: hidden;  /*消除该标签子级浮动*/
	}

使用after伪元素

添加clearfix类给父级元素

	/*清除浮动*/
	.clearfix:after { /*正常浏览器 清除浮动*/
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		*zoom: 1; /*zoom 1 就是ie6清除浮动方式  * 代表ie7以下版本所识别*/
	}

<div class="father clearfix">  /*多标签类*/

使用before和after双伪元素

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


<div class="father clearfix">

AuroraCD

关注

0
点赞
踩
0

收藏

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

浮动为了让多个块级元素显示在一行。块级元素一行只显示一个，行内元素一行显示多个，这种正常的显示方式称为“标准流”。所以浮动是脱标的。但浮动也有几条性质浮动在父级元素里面不会超过内边距和边框的范围（父级元素设置了高度）如果子盒子有一个浮动了，其余的子盒子都应浮动，否则由于浮动的盒子不占位置会影响其他盒子位置有默认的隐式转换块级元素转换为行内块元素消除浮动为了解决父级元素（...
复制链接

扫一扫