float（浮动）模型

来源：互联网发布：电脑免费屏幕录像软件编辑：程序博客网时间：2024/06/05 20:00

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

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

而产生了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；

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

阅读全文

0 0