标准流盒子布局：

1、普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

(1) 、为什么使用浮动

我们需要使用浮动来实现网页的布局效果，比如左右布局；

实际工作中我们一般都是用浮动来进行页面布局的；

（2）、浮动：浮动布局的原理应用

让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left  right  none（不浮动默认就是）  浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

（3）、常见布局（重点一定要会写）

实际工作中我们最常见的布局就是左右布局和左中右布局

左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

左中右布局

一个固定宽高的父级盒子（高度不一定固定）嵌套了左中右三个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子坐浮动float:left;，第三个盒子右浮动float:right;

然后给中间的盒子设置margin-left实现三个盒子之间的外边距相同；

（4）、浮动布局的注意事项

01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范；

下图问题：新闻列表用的是h3标签，是块级元素，默认的宽度是100%，尽管下面的更多a右浮动了也上去

（5）、实际的导航布局Html结构

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

这么做的好处

01 li嵌套a语义清晰；

02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；

03  友情链接类似的小导航可以直接用a链接完成；

导航布局思路

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

• 给li设置固定的宽高（如果文字不一样多我们可以不设置宽度，用padding撑开）

• 然后给li设置float:left;让li在一行显示

• 如果想要鼠标经过a有一些样式，将a用display:block;转化为块元素，设置宽高和li一致；

（6）、浮动元素与父盒子的关系

• 浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

（7）、浮动元素与兄弟盒子的关系

• 1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；

• 2、做布局的时候所有的盒子必须都浮动，才能完成效果；

• 3、浮动的元素顶端对齐，两个元素之间没有缝隙

标准流盒子布局：

1、普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

(1) 、为什么使用浮动

我们需要使用浮动来实现网页的布局效果，比如左右布局；

实际工作中我们一般都是用浮动来进行页面布局的；

（2）、浮动：浮动布局的原理应用

让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left  right  none（不浮动默认就是）  浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

（3）、常见布局（重点一定要会写）

实际工作中我们最常见的布局就是左右布局和左中右布局

左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

左中右布局

一个固定宽高的父级盒子（高度不一定固定）嵌套了左中右三个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子坐浮动float:left;，第三个盒子右浮动float:right;

然后给中间的盒子设置margin-left实现三个盒子之间的外边距相同；

（4）、浮动布局的注意事项

01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范；

下图问题：新闻列表用的是h3标签，是块级元素，默认的宽度是100%，尽管下面的更多a右浮动了也上去

（5）、实际的导航布局Html结构

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

这么做的好处

01 li嵌套a语义清晰；

02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；

03  友情链接类似的小导航可以直接用a链接完成；

导航布局思路

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

• 给li设置固定的宽高（如果文字不一样多我们可以不设置宽度，用padding撑开）

• 然后给li设置float:left;让li在一行显示

• 如果想要鼠标经过a有一些样式，将a用display:block;转化为块元素，设置宽高和li一致；

（6）、浮动元素与父盒子的关系

• 浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

（7）、浮动元素与兄弟盒子的关系

• 1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；

• 2、做布局的时候所有的盒子必须都浮动，才能完成效果；

• 3、浮动的元素顶端对齐，两个元素之间没有缝隙