1.标准文档流

标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做标准流布局。

2.浮动

2.1 浮动的机制

当有两个div同时在标准刘文档中的时候，两个div会隔行显示：

img1

(2D图)

img4

**（3D图）**

当将蓝色div对应的CSS添加浮动属性后，蓝色div会脱离标准流，而浮在标准流之上

1
float: left;

img2

**（2D图）**

img5

**（3D图）**

将蓝色div和红色div同时设置浮动属性后，两者都处于浮动的层次，显示方式默认为贴边水平并排显示

img3

**（2D图）**

img6

**（3D图）**

2.2 浮动的使用

1
选择器{float:属性值;}
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）

2.3 清除浮动

2.3.1 为什么要清除浮动

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

2.3.2 清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

img7

img8

2.3.3 清除浮动的方法

1)用clear属性清除浮动

1
选择器{clear:属性值;}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

2)额外标签法

在浮动元素末尾添加一个大小为0，内容为空的标签，如：

1
<div style="clear:both"></div>

（不推荐）

3)父级添加overflow属性方法

给父级元素添加

1
overflow： hidden；  /*auto、scroll都可以*/

4) 使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了 。

1
2
3
4
.clearfix::after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}   /*IE6、7 专有 ，星号表示IE7之下浏览器识别，其他浏览器不识别*/
									
									/*然后给父元素加上clearfix类就可以了*/

5)使用before和after双伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix::before,.clearfix::after { 
  content:"";
  display:table;  
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

 /*然后给父元素加上clearfix类就可以了*/

最后更新： 2019年04月17日 17:50

原始链接： https://HowlCN1997.github.io/2018/01/25/关于浮动的若干问题/

赏
× 请我吃糖~
打赏二维码