C13、网页布局方式

C13、网页布局方式

一、网页布局方式：

1. 浏览器如何对当前内容进行排版

2. 排版方式：

   • 1.标准流（文档流/普通流） 垂直排版（从上到下）

   • 2.浮动流

   • 3.定位流

二、浮动流基本概念

1. 浮动流：“半脱离标准流”的排版方式

2. 浮动流只有一种排版方式，就是水平排版，它只能设置一种排版方式

3. 浮动流不能使用margin: 0 auto 的

4. 部分块级元素，浮动流中全部可以设置宽高，不区分

三、浮动元素脱标

1. 什么是浮动元素脱标？

   • 脱标： 脱离标准流 当某一个元素浮动后，那么这个元素就会像从标准流删除一一样，会造成前盖后

2. 浮动排序规则

   • 相同方向上的浮动元素，先浮动的元素会显示在前面。后浮动元素会显示在后面，不发生覆盖。

   • 不同方向的浮动，左浮找做左浮，右浮找右浮动

   • 浮动元素浮动之后位置，由浮动元素浮动之前在标准流来确定

四、浮动元素贴靠/字围现象

1. 当不够宽的时候，div会自动向下移动。

2. 当宽度不够自动贴靠直到贴到父元素为止。

3. 浮动元素不会盖住文字