关于什么是浮动和清除浮动的方法——个人心得

最新推荐文章于 2022-04-05 23:26:05 发布

贪吃ღ大魔王

最新推荐文章于 2022-04-05 23:26:05 发布

阅读量297

点赞数

分类专栏：个人心得文章标签： html css

本文链接：https://blog.csdn.net/weixin_44070254/article/details/115337622

版权

个人心得专栏收录该内容

20 篇文章 1 订阅

订阅专栏

关于什么是浮动和清除浮动的方法——个人心得

1.关于什么是浮动，浮动有什么特点？
要想知道什么是浮动，我们要先了解什么是文档流，文档流是页面布局的一种，如一个页面中主要的板块都是块元素且各占一行，在页面中从上往下排列的布局叫做文档流。
当一个元素浮动的时候，它会从页面中脱离文档流，浮动的元素不再占有原来的位置，下面的元素会顶替上来在它的位置。
我们举个简单的栗子：我们在一个父元素盒子box中，设定A、B两个块元素、当我们把A浮动的时候，A会脱离文档流，不再占有它原来的位置，B会补充它的位置，这时候A就会把B给遮盖住。
代码如下：

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 400px;
			border: 1px solid black;
		}
		.A{
			width: 200px;
			height: 100px;
			background-color: red;
			float: left;
		}
		.B{
			width: 300px;
			height: 200px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="A">浮动的元素A</div>
		<div class="B">下面的元素B</div>
	</div>
</body>

浮动前的效果

这是浮动后的效果。

2.浮动的特点

	1.碰到父元素边缘停止
	2.碰到浮动的元素也会停止
	3.浮动不会影响它上面的元素，但是会影响它下面的元素

3清除浮动的方法

第一种：额外标签法
在浮动的元素后面添加一个标签
clear：left/right/both 向左/向右/两边都清除
用这种额外标签法添加了无意义的标签，好不好用不做评价。
其实添加Br Hr标签也可以
第二种：给浮动的元素的父元素添加overflow属性

		overflow：hidden
		添加overflow 出发了BFC机制但是有时可能会隐藏掉内容

第三种：使用after和before 双为元素清除浮动

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

这种方法相较于使用after伪元素较差一点

第四种：使用after伪元素清除浮动

	.news {

background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

.clearfix:after{
content: “020”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
/* 触发 hasLayout */
zoom: 1;
}

some text

这种方法比较推荐，现在的一些知名的公司做网站都是用的这种方法。

贪吃ღ大魔王

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
关于什么是浮动和清除浮动的方法——个人心得

关于什么是浮动和清除浮动的方法——个人心得1.关于什么是浮动，浮动有什么特点？要想知道什么是浮动，我们要先了解什么是文档流，文档流是页面布局的一种，如一个页面中主要的板块都是块元素且各占一行，在页面中从上往下排列的布局叫做文档流。当一个元素浮动的时候，它会从页面中脱离文档流，浮动的元素不再占有原来的位置，下面的元素会顶替上来在它的位置。我们举个简单的栗子：我们在一个父元素盒子box中，设定A、B两个块元素、当我们把A浮动的时候，A会脱离文档流，不再占有它原来的位置，B会补充它的位置，这时候A就会把B
复制链接

扫一扫