浮动、布局、实例

1.浮动(float)

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

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

1.3为什么要浮动

网页布局第一准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

1.4是浮动？

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

float

1.5 浮动的特性(重难点)

• 浮动元素会脱离标准流脱标
• 浮动的盒子不再保留原先的位置

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

2.常见网页布局

2.1 常见网页布局

2.2浮动布局注意点

理解不了的话直接就如果不在同一行那一定有一个没浮动找到那个就好了

思考题

理想：给不确定的高让孩子撑开

3.清除浮动

3.1为什么需要清除浮动

3.2清除浮动的本质

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

语法：

选择器{clear:属性值；}