很久之前在知乎看到一个很有趣的观点，某位用户说css为什么难学，是因为它们不正交，也就是说逻辑关联性不强，然后学了这么久的前端，js(react、umi、dva、node.js、egg)，对于html和css没有怎么认真研究，于是前段时间看了《Head First Html and CSS》2.1，看完了感觉就是写页面的时候，要考虑到页面的语义化，然后css好像没有学到什么技巧，就是简单的页面流，布局，margin border padding content(简称MBPC)，感觉学到了点东西，又感觉什么都没学到。
现在用自己的话描述一下css中最重要的组成，布局。
用布局中的两列布局的实现，一探究竟。众所周知，页面中有三种基本的定位机制，普通文档流（块状元素上到下，行内元素从左上到右下），浮动定位（float），绝对定位(absolute)。
所以第一种方式，用绝对定位的方式进行两列布局（两栏布局）。
html所示：
css:
效果：
总结一下，父元素（标签）position relative，子元素absolute，父元素“框”住子元素，也就是俗称的“子绝父相”的定位模板。其中也用到了left top等定位(absolute relative fixed)之后可以用到的属性。
第二种方式就是浮动了。
html:
css:
效果图我就不贴了，反正都是一样的。
在做这个float以及前面的absolue的时候，我都是固定了子元素的宽高（width:50%,height:200px），在选谁是浮动定位/绝对定位的时候左右都有过尝试，发现了一些问题，总得来说就是“谁主张谁举证”，谁要违反普通页面流的特性，谁就要做出“定位”。但元素right进行float:right之后,，尽管进行margin或者css3的transform:translateY()进行位移，原本元素占据的空间还会存在的。