float（浮动）模型

最新推荐文章于 2022-03-31 19:07:29 发布

原创最新推荐文章于 2022-03-31 19:07:29 发布 · 829 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css #float #清除浮动

前端学习同时被 2 个专栏收录

23 篇文章

订阅专栏

学习笔记

17 篇文章

订阅专栏

一、浮动元素会产生浮动流

所有产生了浮动流的元素，块级元素是看不到他们的（也就是说，块级元会认为浮动元素所占的位置是没有东西的，就会自动覆盖上去）；

而产生了BFC的元素和文本类属性的元素以及文本都能看到浮动元素；

**也就是说产生浮动的元素对不同的其他元素的影响不同**

解释一下BFC：

BFC :（Block Formatting Context）

直译为“块级格式化范围”。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器里的box的布局，与这个容器外的毫不相干；

如何触发一个盒子的BFC（四种方法）:

1、

position:absolute;

2、

display:inline-block;

3、

float:left;

float:right;

4、

overflow:hidden;

为了解决上述问题（浮动对后继元素会有影响），有以下两种方法：

1、在父级的最有一个有浮动的子级后面添加一个元素，然后在元素的css内加上clear:"both";来清除浮动；

先来看一下过程：

父级元素在没有设置固定宽高的情况下，其子元素如果添加了浮动元素，那么父级元素的空间是不会被子级元素撑开的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
	.wrapper{
	
		border: 1px solid #000;
	}
	.content{
		float: left;
		width: 100px;
		height: 100px;
		background-color: #000;
	}
	</style>
</head>
<body>
<div class="wrapper">
	<div class="content"></div>
	<div class="content"></div>
	<div class="content"></div>
</div>
</body>
</html>

效果图：

如果在父级的最有一个有浮动的子级后面添加一个元素，然后在元素的css内加上clear:"both";属性的话：

html中添加：

<div class="wrapper">
	<div class="content"></div>
	<div class="content"></div>
	<div class="content"></div>
	<p class="clear"></p>
</div>

style中添加：

.clear{
		clear: both;
	}

效果图为：

可见，父级在逻辑上被撑开，那么这个方法在逻辑上是解决了问题的

但是不科学，因为添加元素改变了原本页面的结构；

2、利用伪元素来清除浮动

这种方法就要严谨一些了；伪元素是天生就存在的，存在于任意一个元素中，但是要用css来进行修改；并且它天生是inline元素

span::before{}

这是逻辑最前

span::after{}

这是逻辑最后

在此实例中，我们也可以这样修改css而不用添加元素来清除浮动：

.wrapper::after{
		content: "";
		clear: both;
		display: block;
	}

页面效果：

content:"";

这一句是必须要有的，用来修改伪元素里面的内容；必须加这一句，伪元素才能生效；

clear:both;

这个就是清除浮动啦；

display:block;

因为能清除浮动的必须是块级元素，所以这一句也是必要的；

**补充**

凡是设置了

position:absolute;

float:left/right;

的元素，系统自动从内部把元素转换成了inline-block；

总结：有意识并且有效的清除浮动，可以为我们之后的编码减少很多不必要的问题；