css布局——浮动布局

前言：网页布局的本质就是用css来摆盒子。把盒子摆到相应的位置

css提供了三种传统布局方式

• 普通流
• 浮动
• 定位

---

目录

三.浮动布局

1.标准流（普通流/文档流）

1.1块级元素独占一行，从上到小顺序排列

1.2行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行

2.浮动

2.1 为什么需要浮动

2.2什么是浮动

 2.3浮动特性（重难点）

 2.4浮动的元素经常和标准流父级搭配

 2.5清除浮动

2.5.1为什么要清除浮动

2.5.2清除浮动的本质

谢谢观看！！！我们下期再！！！

---

三.浮动布局

1.标准流（普通流/文档流）

所谓标准流，就是按标签默认的方式排序

1.1块级元素独占一行，从上到小顺序排列

• 常用标签：div, p, h1~h6, ul, ol, 等

1.2行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行

• 常用元素：span a i em 等

以上就是标准流布局，我们前面学习的就是标准流；标准流是最基础的布局方式

注意： 实际开发中，一个页面基本都包含了这三种布局方式（后面有其他布局方式）

2.浮动

2.1 为什么需要浮动

总结：有很多布局效果，标准流没有办法完成，此时就可以用浮动完成布局，因为浮动可以改变标签的默认排列方式

浮动的最终的应用：可以让多个块级元素在一行内排列

2.2什么是浮动

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

语法：

          选择器： {                

                 float：属性值；

             }                                 

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素右浮动

 2.3浮动特性（重难点）

1. 浮动元素会脱离标准流（脱标）
2. 浮动的元素具有行内块元素的特性
3. 浮动元素会一行内显示并且在盒子的顶部对齐

• 浮动：脱离标准流的控制（浮）移动到指定位置（动）（俗称“脱标”）
• 浮动的盒子不再保留原来的位置（下面的盒子会去占用浮动元素的位置，使浮动盒子压住标准流盒子 但是不会压住文字）

 浮动后

如果多个盒子都设置里浮动则它们会按照属性值一行内显示并且对顶端对齐。

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

 2.4浮动的元素经常和标准流父级搭配

使用为了约束浮动元素的位置，我们网页布局一般采取的策略是：

先用标准流的元素排列上下位置，之后内部子元素，采取浮动排列左右位置，符合网页布局第一准则

一个元素具有了浮动理论上其他兄弟元素也要浮动以防止引起问题

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

 2.5清除浮动

2.5.1为什么要清除浮动

由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占用位置，会导致父级盒子高度为0，从而影响下面的标准流盒子

2.5.2清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身就有高度，则不需要清除浮动

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

语法：

            选择器： {clear:属性值；}                              

属性值	说明
left	清楚左侧浮动的影响
both	清楚两侧浮动的影响
right	清楚右侧浮动的影响

---

谢谢观看！！！我们下期再！！！