网页布局方式

网页布局方式

• 标准流（文档流/普通流）排版方式
• 浮动流排版方式
• 定位流排版方式

图文混排

• 什么是图文混排，怎么样实现环绕效果，实现的原理是什么

清除浮动

• 为什么要清除浮动？
• 清除浮动是什么意思？
• 在企业开发怎么应用？
• 有几种清除浮动的方式？分别有什么优缺点？

解答

• 确保两个浮动元素独占不同的行，即第二个浮动元素不去找(靠在)第一个浮动元素边上

思路

• 我们希望而且也认为我们所见的复杂事物都是表现，其背后一定有原理在驱动，而掌握了原理，我们就能更好地掌握事物表现出来的现象。这几乎是一种下意识的反应。
• 但实际上我们应该细化这个问题：是否存在一类现象和图文混排现象是相似的，而且可以用同一种CSS规律进行解释
• 大部分时候我们下意识地想要进行原理的解释是因为我们没有学习过，我们学过css的三大元素，学过盒子模型，他们是有涉及到排版的，当我们学标准流、浮动流、定位流的时候自然而然地会去想，这些排版的规律是否只是元素本身规定的表象，自然地会去追求其原理
• 而某一种流排版方式中的是否能实现环绕效果和图文混排更是细枝末节中的细枝末节
• 有时候我会看得很快，甚至不做笔记，因为我遇到了问题，而这个问题并没有被解释清楚，一来我是想，没有任何问题都能在刚提出的时候被解决，你可能需要一些背景知识才能去解决，甚至你可能需要横向对比，阅历过其余相关的知识才能更好地了解
• 但是同时也有一个问题：你怎么确认你的老师\你读的书会给你解答
• 像是浮动float究竟和CSS三大元素的属性有什么关系？比起三大元素的属性他会更本质吗？只不过因为之前因为种种原因，甚至是考虑到入手难度的情况下没有一开始就去讲解
• 我们设置一个div.box1宽度为300，高度为200,设置一个div.box2宽度为300，高度为200,两个都设置为float:left，当浏览器宽度为600时，两个div并列显示；当浏览器宽度为500时，box2被挤到了下方，box1能够完全被显示；当浏览器宽度为200时，box2被挤到下方，box1的显示需要滚动滚动条才能完全看得清楚，为什么会是这样的
• 半桶水的时候是才最容易响，因为不想空桶的时候什么东西都能完全接受而不产生疑问，也不是填满了知道其前因后果，懂得一些，但是懂得又不够多
• 设计理念，为什么会选择这样设计而不是其他的设计方式?(本质上还是最求核心和原理)以后还会不会发生改变

关于布局学习的思路：

• 上来什么都不说，就先介绍三种排版方式(老师是怎么样讲这三种排版方式的？)
• 其实这里就已经产生疑问了，为什么只有这三种排版方式？
• 因为相比起元素，属性这些类似于原子的构成元素，我们更容易对牛顿三大定律这些看起来更偏向于应用的东西产生疑问，因为后者更像是一种公理，或者说是我们对现象的总结，潜意识中总觉得是因为