css 布局的三种机制

正常流就是按照正常的逻辑从上到下，从左到右去布局，这次以及往后我们学习了浮动和定位之后你会发现，其实在日常的业务和工作当中按照正常的逻辑是行不通的，所以才会出现了浮动和定位等布局方式。三种常用的布局方式

• 普通流：块级元素，行内元素

• 浮动：让普通流浮动起来，主要作用就是让多个块级盒子一行展示

• 定位：将盒子定位在浏览器某一个位置，css 离不开定位

什么是浮动 &&为什么要浮动

• 什么是浮动：首先浮动就是让盒子或者元素脱离正常的标准流控制，你可以想象一下，元素本来在一个位置，加一个浮动它就会想云一样飘浮起来。进而移动到指定的位置。需要记住的是，如果元素或者盒子添加了浮动就不再占有本来的位置了。

• 为什么要浮动：主要作用就是让多个块级盒子在一行显示，如果是转换为行内快元素的话，可以将块级元素一行展示，但是中间有一个不可避免的缝隙。所以使用浮动是比较合理的。

浮动在 css 中：float

// float —— 浮动float: none   元素不浮动（默认值）// 元素向左浮动float: left  元素向左浮动// 元素向右浮动float: right  元素向右浮动

浮动的口诀

在 float 浮动中必须得记住两个字：“浮”，“漏”。

浮

“浮”表示的就是当元素浮动之后是脱离正常的标准流的这个一定要记好，在往后的代码操作中非常重要。 如下图 1

  // 给最大的盒子设置浮动  .father {    float: left;    width: 300px; height: 300px;      }  .son {    width: 200px; height: 200px;      }

在上述的代码中，我们将外层的 father 盒子设置了一个 float: left 向左浮动，所以它就会浮起来不占有原来自己的位置，进而 son 盒子就会出现在 father 盒子原来的位置，因为 father 比 son 盒子大，如果小的话，就看不到浮动起来的盒子了。

漏

“漏” 表示在当前的元素浮动起来之后就不会再站有原来的位置了，要把下面的位置让给标准流。在上述的代码中就会出现这个问题。粉色浮动起来的盒子原来的位置已经让给了蓝色盒子了。

注意：还有一点需要注意的是，浮动的元素如果父级装不下的话，多余的盒子会另起一行对齐

浮动元素与兄弟盒子的关系

在浮动中还需要记住的是浮动元素只会影响当前或者后面的标准盒子，不会影响前面的标准流，相当于如果第一个盒子不浮动的话，那么后续的盒子浮动就会顶着第一个盒子。如下图 2

  .first {    width: 200px; height: 200px;      }  .second {    float: right;    width: 200px; height: 200px;      }

在上图中可以发现，如果第一个盒子正常流，第二个盒子如果浮动的话，第一个盒子还是原来的保持块级元素占据一行，第二个盒子只会顶着第一个盒子的底部浮动。

清除浮动

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

什么时候清除浮动

• 父级没高度了

• 子盒子浮动了

• 浮动之后影响下面的布局了以上这些情况都需要清除浮动

注意：清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

清除浮动语法 clear

• clear: left ———— 清除左侧浮动（几乎不用）

• clear: right ———— 清除右侧浮动（几乎不用）

• clear: left ———— 清除两侧浮动（重点用）

清除浮动的四种方式

1. 额外标签法：最后一个浮动标签末尾添加一个空标签

// 在最后一个浮动标签的末尾添加 如下 <div class="clear"></div>.clear {  clear: both;}

2. 父级添加 overflow 属性方法

// 给父级的盒子添加 overflow：hidden；<div class="father hidden"></div>.hidden {    overflow: hidden;}

3. 使用 after 伪元素清除浮动（最常用，重点）

// 在父元素中添加 伪类元素清除浮动.clearfix:after {    content: "";    display: block;    height: 0;    visibility: hidden;    clear: both;}

注意：如果不了解伪类元素是什么的话，可以先把这种方式记下来，后续中我们自然会讲到伪元素。伪元素相当于额外空标签的升级版。

4. 使用双伪元素清除浮动

// 给父类添加一个 clearfix.clearfix: before,.clearfix: after {    content: "";    display: table}.clearfix: after {    clear: both;}.clearfix {    *zoom: 1;}

以上就是清除浮动的四种方式了，可以下去自己在代码中练习练习，这四种方式第三种是非常常用的，在各大网站上都是高频的出现，暂时就不需要了解它的意思在后续的 css 中学完会逐个分析每句的意思。先学会使用就可。