html float 布局,CSS float浮动布局浅析

前言

CSS布局是前端初级学习时的重中之重，web页面默认时按照标准文档流进行布局的，什么是标准文档流呢，主要是指web页面通常是按照从上向下的顺序布局的，以DIV 为例，我们知道DIV是块级元素，在页面中需要单独占一行，如下图所示：

image.png

标准文档流有很多限制，很多时候我们需要设置多个DIV并排等操作，这就需要想办法来脱离标准文档流：

CSS 中主要有3种方法来脱离标准文档流：

浮动(float)

绝对定位(absolute)

固定定位

本文介绍的就是浮动布局；

浮动float 浅析

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

假如上图中DIV2设置浮动，DIV2就会脱离标准流，导致DIV3 向上移动，如下图所示，DIV2 浮动在上一层遮挡了部分DIV3；

image.png

如果DIV2 DIV3 同时设置浮动的话，

image

DIV3跟随到了DIV2的后面，但是注意：DIV2虽然设置了浮动，却并没有自动跟随到DIV1的后面，

所以假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

浮动的另外一个好处就时弹性布局如下图所示，页面随窗口的变化自适应调整：

image.gif

清除浮动

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。清除浮动的方法主要有以下几种：

1.在结尾处添加空div标签clear:both

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

2.父级div定义伪类：after和zoom

3.父级div定义height

4.父级div定义overflow:hidden

5.父级div定义overflow:auto