Web前端-HeadFirst-笔记-Ch11-流，float，分栏

流Flow

浏览器在页面上摆放HTML元素的方法。

1. 块元素从上向下流，各元素之间有一个换行。
2. 内联元素水平方向相互爱着，总体从左上流向右下。

tips:

1. 浏览器会根据页面上放置的元素类型外边距做不同的处理。
2. 浏览器并排放两个内联元素，总外边距为两个元素的外边距之和。
3. 浏览器上下放置两个块元素时，会将共同外边距折叠在一起。
4. 当一个元素嵌套在另一个元素中，两者都有外边距，两个垂直外边距碰到一起就会折叠。如果外面的元素有一个边框，则不会折叠。
5. 文本的内容不是元素，文本作为内联元素工作是因为：浏览器需要让它流入界面，会先确定一行能流入多少文本，然后把这行文本当作一个内联元素。文本是内联元素的一种特殊情况，浏览器会把它分解为适当大小的内联元素。

float

步骤：

1. 该属性会首先尽可能远地向左或向右浮动一个元素，然后它下面（/后面）的所有内容会绕流这个元素。
2. 浏览器将此元素从流中删除，块元素会填在浮动元素的水平位置上，在浮动元素的下方。
3. 但是块元素的内联元素流入时会考虑浮动元素的边界。
4. 所有的浮动元素都必须有一个要求：指定宽度。

限制：当时用手机类似的显示受限的设备时，会首先显示边栏内容，再显示主内容。

解决方案：为使内容有正确的顺序：①边栏可扩展，主内容固定宽度，左浮动；②凝胶布局。

分栏

使用外边距间隔。

tips：

1. 主内容区尽量不设定固定宽度：以避免不正确的页面扩展和收缩。
2. 边栏与页脚重合：在页脚使用clear：right；当元素流入页面时，在此元素的左（右）不允许浮动内容。