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

CSS提供了三种传统布局方式（就是盒子如何进行排列）

标准流浮动定位

 

1.1 标准流（普通流、文档流）

标准流：标签按照规定好的默认方式排列

块级元素独占一行，从上向下顺序排列行内元素按照从左到右顺序排列，碰到父元素边缘自动换行

 

1.2 浮动 float

浮动可以改变元素标签默认的排列方式。

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

浮动最典型的应用：让多个块级元素在一行内并排显示。

语法： 选择器 { float: 属性值 } 属性值描述none元素不浮动 (默认)left元素向左浮动right元素向右浮动 <style> div { float: left; } </style>

 

浮动的特性（重难点）

浮动元素会脱离标准流（脱标），文档不会保留浮动元素原先的位置

浮动元素会在一行内显示，并且元素顶部对齐，父元素宽度不够，则另起一行。

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

 

浮动布局注意点

浮动和标准流的父盒子搭配浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

 

清除浮动

在多数情况下，浮动元素的父盒子不设置高度，让浮动元素自动撑开。但浮动元素脱离了文档流，不占位置，导致父盒子的高度为0，影响后面的标准流。

语法： 选择器 { clear: 属性值 } left清除左侧浮动的影响right清除右侧浮动的影响both同时清除左右两侧浮动的影响

 

清除浮动的策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

 

清除浮动的方法：

隔墙法：在最后一个浮动元素的后面增加一个块元素，给这个块元素设置浮动属性父级设置 overflow:hidden | auto | scroll         缺点：无法显示溢出的部分:after 伪元素法（推荐）：隔墙法的升级版，给要清除浮动的父元素加上class：clearfix 即可 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } 双伪元素法 .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }