CSS浮动布局

---

一、传统网页的三种布局方式

CSS提供了三种传统的布局方式：

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

什么是标准流？

所谓标准流（普通流/文档流），就是标签按照规定好默认方式排列。

1.块级元素会独占一行，从上向下顺序排列。
2.行内元素会按照顺序从左到右排列，碰到父元素边缘则自动换行。
注：标准流是最常用的布局方式。

元素的不同类型

1.块元素：可以设置宽高大小，默认宽度为100%，并且独占一行（由上至下，纵向排列）

• 常用元素：p、div、hr、h1~h6、ul、ol、form、table
  2.内联（行内）元素：无法设置宽高，元素大小随内容变化，所以元素默认排在一行。
• 常用元素：i、b、span、a
  3.内联块元素：既能设置宽高大小，又能排在一行显示。
• 常用元素：img、input

二、什么是浮动？

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

选择器{float：属性值；}

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

三、浮动的特性

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

浮动元素的特点

1. 浮动元素不会覆盖文字内容
2. 浮动元素不会覆盖图片内容
3. 浮动元素不会覆盖表单内容

四、 为什么需要浮动？

因为浮动可以改变元素标签默认的排列方式，有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。
浮动最典型的应用：可以让多个块级元素一行内排列显示。

五、总结

以上就是今天要讲的内容，本文仅仅简单讲了CSS中浮动的基本概念，更多有关浮动的应用还需要我们在进一步的网页开发中理解和掌握。