1. 传统网页布局三种方式

# 1. 传统网页布局三种方式

普通流（标准流）
浮动
定位

# 1.1 标准流（普通流/文档流）

标签按默认方式排列

块级元素独占一行，从上向下顺序排列 div hr p h1-h6 ul ol dl form table
行内元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 span a i em

# 1.2 浮动

可以改变元素标签默认的排列方式最典型应用：可以让多个块级元素一行内排列显示

# 网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器 {
    float: none;  /*默认值，元素不浮动*/
    float: left;  /*向左浮动*/
    float: right; /*向右浮动*/
}

# 总结

标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
浮动：可以让块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
定位：定位最大的特点就是有层叠的概念，可以让多个盒子前后叠压显示，如果元素自由在某个盒子内移动就用定位布局

# 2. 浮动特性

浮动元素会脱离标准流（脱标）

脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
浮动的盒子不再保留原先的位置

浮动元素会一行内显示并且元素顶部对齐

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

浮动元素会具有行内块元素的特性

任何元素都可以浮动
行内元素有了浮动，不需要转换成块级、行内块元素就可以直接设置高度和宽度
块级元素没有设置宽度，默认宽度和父级一样宽，添加浮动之后，它的大小根据内容来决定

# 3. 浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

# 网页布局第二准则：先设置盒子大小，之后设置盒子的位置

# 4. 浮动布局注意点

浮动和标准流的父盒子搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

# 5. 清除浮动

# 5.1 为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

由于浮动元素不占用原文档流的位置，所以它会对后面的元素排版产生影响

# 5.2 清除浮动本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子的自动检测高度，父级有了高度，就不会影响下面的标准流

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

策略：闭合浮动

# 5.3 清除浮动方法

额外标签法（隔墙法）
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

# 5.3.1 额外标签法（隔墙法）

在浮动元素末尾添加一个空的标签。

<div style = "clear:both"> </div> /*新增的盒子必须是块级元素*/

或者其他标签

<br />

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构比较差

# 5.3.2 父级添加overflow属性

overflow:hidden; /*最常用*/
overflow:auto; /*下面两个也行*/
overflow:scroll;

优点：代码简洁
缺点：无法显示溢出的部分

# 5.3.3 父级添加after伪元素

.clearfix:after {
    content: "";
    diaplay: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { /*  IE6,7专用*/
    *zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝、网易

# 5.3.4 父级添加双伪元素

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix { /*  IE6,7专用*/
    *zoom: 1;
}

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米，腾讯

定位小技巧

YK菌

Choose mode