你可以考虑给 a 添加 style='padding-left: 50px' 或者给 b 添加 style='margin-left: 50px'
现在不推荐直接写 width=200, height=200px, 而是使用 style='width: 200px height: 200px'。
如果使用的是 Safari 或 Chrome 浏览器的话，可以打开“开发人员选项”，观察控制台，Chrome 里面是按 F12，然后在最左下角的一个放大镜拿来点一下，然后选中你的 b 或 a 就可以在右下角的观察它的 Metrics 里面是如何计算出尺寸的，另外，它上面还有当前生效的 style 是什么，还要把某些 style 划线表示这个规则的优先级不如另一个而被禁用了。通过这些你能更快地学习到底如何设置 CSS 才能达到你的效果。
网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种： 普通流（标准流） 、 浮动 和 定位 。
html语言当中另外一个相当重要的概念—— 标准流 ！或者普通流。普通流实际上就是一个网页内标签元素正常 从上到下，从左到右排列 顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动最早是用来控制图片，以便达到 其他元素（特别是文字）实现“环绕”图片 的效果。
后来发现浮动有个很有意思的事情：就是 让任何盒子可以一行排列 ，因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经实现真正意义上的网页布局，具体CSS3会详细解释）
元素的浮动是指 设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程 。
浮动脱离标准流， 不占位置 ， 会影响标准流 。浮动 只有左右浮动 。
所以，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是 清除浮动后造成的影响 。如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
其实本质叫做 闭合 浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
可以通过 触发BFC 的方式，可以实现清除浮动效果。（BFC后面讲解）
:after 方式为空元素的升级版，好处是不用单独加标签了。
小问题：
LZ问题不是很明确，还是我太低端了？流定位我不清楚是什么意思，但是如果是采取绝对定位原则，被定位元素会根据绝对定位的属性出现在页面的某个位置，不会考虑其他元素的位置，可能重叠之类，但是如果采用相对定位，那么在HTML中会按照标签的书写顺序进行排列，顺序为从上到下，从左到右，若能容纳此元素，那么就会放在本行，如果放不下，就会挪到下一行，如此反复。![[CSS] svg路径动画](/aiimages/%5BCSS%5D+svg%E8%B7%AF%E5%BE%84%E5%8A%A8%E7%94%BB.png)
